diff --git a/.editorconfig b/.editorconfig index ed2a319d5843..90846de5ee64 100644 --- a/.editorconfig +++ b/.editorconfig @@ -13,4 +13,3 @@ insert_final_newline = false [{package.json,.travis.yml,.eslintrc.json}] indent_style = space -indent_size = 2 diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 000000000000..a299a4435ae8 --- /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 000000000000..d632634540e5 --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1 @@ +open_collective: svelte diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md index 6871094f5cac..7daff3f1ab15 100644 --- a/.github/ISSUE_TEMPLATE.md +++ b/.github/ISSUE_TEMPLATE.md @@ -8,10 +8,13 @@ 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. +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. diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md deleted file mode 100644 index f5369e999177..000000000000 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -name: Bug report -about: Create a report to help us improve -title: '' -labels: 'Bug' -assignees: '' - ---- - -**Describe the bug** -A clear and concise description of what the bug is. - -**Logs** -Please include browser console and server logs around the time this bug occurred. - -**To Reproduce** -To help us help you, if you've found a bug please consider the following: - -* If you can demonstrate the bug using https://svelte.dev/repl, please do. -* If that's not possible, we recommend creating a small repo that illustrates the problem. -* Reproductions should be small, self-contained, correct examples – http://sscce.org. - -Occasionally, this won't be possible, and that's fine – we still appreciate you raising the issue. But please understand that Svelte is run by unpaid volunteers in their free time, and issues that follow these instructions will get fixed faster. - -**Expected behavior** -A clear and concise description of what you expected to happen. - -**Stacktraces** -If you have a stack trace to include, we recommend putting inside a `
` block for the sake of the thread's readability: - -
- Stack trace - - Stack trace goes here... -
- -**Information about your Svelte project:** -- Your browser and the version: (e.x. Chrome 52.1, Firefox 48.0, IE 10) - -- Your operating system: (e.x. OS X 10, Ubuntu Linux 19.10, Windows XP, etc) - -- Svelte version (Please check you can reproduce the issue with the latest release!) - -- Whether your project uses Webpack or Rollup - -**Severity** -How severe an issue is this bug to you? Is this annoying, blocking some users, blocking an upgrade or blocking your usage of Svelte entirely? - -Note: the more honest and specific you are here the more we will take you seriously. - -**Additional context** -Add any other context about the problem here. diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml new file mode 100644 index 000000000000..38a971864b97 --- /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 000000000000..ee3e5a41b982 --- /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.md b/.github/ISSUE_TEMPLATE/feature_request.md deleted file mode 100644 index e533c21c96fa..000000000000 --- a/.github/ISSUE_TEMPLATE/feature_request.md +++ /dev/null @@ -1,23 +0,0 @@ ---- -name: Feature request -about: Suggest an idea for this project -title: '' -labels: 'New Feature' -assignees: '' - ---- - -**Is your feature request related to a problem? Please describe.** -A clear and concise description of what the problem is. For example: I'm always frustrated when [...] - -**Describe the solution you'd like** -A clear and concise description of what you want to happen. - -**Describe alternatives you've considered** -A clear and concise description of any alternative solutions or features you've considered. - -**How important is this feature to you?** -Note: the more honest and specific you are here the more we will take you seriously. - -**Additional context** -Add any other context or screenshots about the feature request here. diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml new file mode 100644 index 000000000000..2174f851a0c9 --- /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/ISSUE_TEMPLATE/questions-and-help.md b/.github/ISSUE_TEMPLATE/questions-and-help.md deleted file mode 100644 index a6e0dc6e19a2..000000000000 --- a/.github/ISSUE_TEMPLATE/questions-and-help.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -name: Questions and help -about: If you think you need help with something related to Svelte -title: '' -labels: 'Question' -assignees: '' - ---- - -This issue tracker is intended to collect bug reports and feature requests. - -For help with installation, information on how features work, or questions about specific features of Svelte, please come and join us in the [Svelte Discord](https://svelte.dev/chat), or ask your question on [Stack Overflow](https://stackoverflow.com/questions/tagged/svelte). Any issues open for help requests will be closed to keep from clogging up the issue tracker. diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 7bd900ac33b2..7de5a35e1359 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -1,8 +1,8 @@ - - ### Before submitting the PR, please make sure you do the following -- [ ] It's really useful if your PR relates to an outstanding issue, so please reference it in your PR, or create an explanatory one for discussion. In many cases, features are absent for a reason. -- [ ] This message body should clearly illustrate what problems it solves. If there are related issues, remember to reference them. -- [ ] Ideally, include a test that fails without this PR but passes with it. PRs will only be merged once they pass CI. (Remember to `npm run lint`!) +- [ ] 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` or `yarn test`) +- [ ] 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 index abb80bd3fbad..bbfde04f67bb 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -3,34 +3,39 @@ on: [push, pull_request] jobs: Tests: runs-on: ${{ matrix.os }} - timeout-minutes: 6 + timeout-minutes: 15 strategy: matrix: - node-version: [8, 10, 12, 14] + node-version: [8, 10, 12, 14, 16] os: [ubuntu-latest, windows-latest, macOS-latest] steps: - - uses: actions/checkout@v1 - - uses: actions/setup-node@v1 - with: - node-version: ${{ matrix.node-version }} - - run: npm install - - run: npm test - env: - CI: true + - 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: 2 + timeout-minutes: 5 steps: - - uses: actions/checkout@v1 - - uses: actions/setup-node@v1 - - run: 'npm i && npm run lint' + - 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: 3 + timeout-minutes: 10 strategy: matrix: os: [ubuntu-latest, windows-latest, macOS-latest] steps: - - uses: actions/checkout@v1 - - uses: actions/setup-node@v1 - - run: 'npm i && npm run test:unit' + - 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 000000000000..ea6e0f5a60b3 --- /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 index f7fac04ebaa9..478a6f5ceb7b 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,5 @@ .idea .DS_Store -.nyc_output .vscode node_modules *.map @@ -8,6 +7,8 @@ node_modules /compiler.d.ts /compiler.*js /index.*js +/ssr.*js +/action /internal /store /easing @@ -15,27 +16,8 @@ node_modules /transition /animate /scratch/ -/coverage/ -/coverage.lcov /test/*/samples/_ -/test/sourcemaps/samples/*/output.js -/test/sourcemaps/samples/*/output.js.map -/test/sourcemaps/samples/*/output.css -/test/sourcemaps/samples/*/output.css.map /yarn-error.log _actual*.* _output /types - -/site/cypress/screenshots/ -/site/__sapper__/ -/site/.env -/site/.sessions -/site/static/svelte-app.json -/site/static/contributors.jpg -/site/static/workers -/site/static/organisations -/site/scripts/svelte-app -/site/scripts/community -/site/src/routes/_contributors.js -/site/src/routes/_components/WhosUsingSvelte.svelte diff --git a/.mocharc.js b/.mocharc.js new file mode 100644 index 000000000000..e55f26099e5b --- /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 index cc535118604c..70c05b01e9f9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,460 @@ # Svelte changelog +## 3.49.0 + +* Improve performance of string escaping during SSR ([#5701](https://github.com/sveltejs/svelte/pull/5701)) +* Add `ComponentType` and `ComponentProps` convenience types ([#6770](https://github.com/sveltejs/svelte/pull/6770)) +* Add support for CSS `@layer` ([#7504](https://github.com/sveltejs/svelte/issues/7504)) +* Export `CompileOptions` from `svelte/compiler` ([#7658](https://github.com/sveltejs/svelte/pull/7658)) +* Fix DOM-less components not being properly destroyed ([#7488](https://github.com/sveltejs/svelte/issues/7488)) +* Fix `class:` directive updates with `` ([#7521](https://github.com/sveltejs/svelte/issues/7521), [#7571](https://github.com/sveltejs/svelte/issues/7571)) +* Harden attribute escaping during SSR ([#7530](https://github.com/sveltejs/svelte/pull/7530)) + +## 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 `
` and `
+
+{@html marked(text)}
+
 
-
-
-
-{@html marked(text)}
\ 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 000000000000..a3334dbd01b8
--- /dev/null
+++ b/site/content/examples/05-bindings/05-file-inputs/App.svelte
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+{#if files}
+	
Selected files:

+	{#each Array.from(files) as file}
+		
{file.name} ({file.size} bytes) 

+	{/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 000000000000..92d0587e8748
--- /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/05-select-bindings/App.svelte b/site/content/examples/05-bindings/05-select-bindings/App.svelte
deleted file mode 100644
index 3f1e7fa7e1a8..000000000000
--- a/site/content/examples/05-bindings/05-select-bindings/App.svelte
+++ /dev/null
@@ -1,39 +0,0 @@
-
-
-
-
-
Insecurity questions

-
-

-	
-
-	
-
-	
-

-
-
selected question {selected ? selected.id : '[waiting...]'}

\ No newline at end of file
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 000000000000..a3607a6f4f3b
--- /dev/null
+++ b/site/content/examples/05-bindings/06-select-bindings/App.svelte
@@ -0,0 +1,39 @@
+
+
+
Insecurity questions

+
+

+	
+
+	
+
+	
+

+
+
selected question {selected ? selected.id : '[waiting...]'}

+
+
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/05-select-bindings/meta.json b/site/content/examples/05-bindings/06-select-bindings/meta.json
similarity index 100%
rename from site/content/examples/05-bindings/05-select-bindings/meta.json
rename to site/content/examples/05-bindings/06-select-bindings/meta.json
diff --git a/site/content/examples/05-bindings/07-each-block-bindings/App.svelte b/site/content/examples/05-bindings/07-each-block-bindings/App.svelte
deleted file mode 100644
index ff91612ec52b..000000000000
--- a/site/content/examples/05-bindings/07-each-block-bindings/App.svelte
+++ /dev/null
@@ -1,49 +0,0 @@
-
-
-
-
-
Todos

-
-{#each todos as todo}
-	

-		
-
-		
-	

-{/each}
-
-
{remaining} remaining

-
-
-
-
diff --git a/site/content/examples/05-bindings/06-multiple-select-bindings/App.svelte b/site/content/examples/05-bindings/07-multiple-select-bindings/App.svelte
similarity index 100%
rename from site/content/examples/05-bindings/06-multiple-select-bindings/App.svelte
rename to site/content/examples/05-bindings/07-multiple-select-bindings/App.svelte
diff --git a/site/content/examples/05-bindings/06-multiple-select-bindings/meta.json b/site/content/examples/05-bindings/07-multiple-select-bindings/meta.json
similarity index 100%
rename from site/content/examples/05-bindings/06-multiple-select-bindings/meta.json
rename to site/content/examples/05-bindings/07-multiple-select-bindings/meta.json
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 000000000000..4d3d75420cc9
--- /dev/null
+++ b/site/content/examples/05-bindings/08-each-block-bindings/App.svelte
@@ -0,0 +1,44 @@
+
+
+
Todos

+
+{#each todos as todo}
+	

+		
+
+		
+	

+{/each}
+
+
{remaining} remaining

+
+
+
+
diff --git a/site/content/examples/05-bindings/07-each-block-bindings/meta.json b/site/content/examples/05-bindings/08-each-block-bindings/meta.json
similarity index 100%
rename from site/content/examples/05-bindings/07-each-block-bindings/meta.json
rename to site/content/examples/05-bindings/08-each-block-bindings/meta.json
diff --git a/site/content/examples/05-bindings/08-media-elements/App.svelte b/site/content/examples/05-bindings/08-media-elements/App.svelte
deleted file mode 100644
index 7a071dbe495f..000000000000
--- a/site/content/examples/05-bindings/08-media-elements/App.svelte
+++ /dev/null
@@ -1,130 +0,0 @@
-
-
-
-
-
Caminandes: Llamigos

-
From Blender Open Projects. CC-BY

-
-

-	
-
-	

-		
-
-		

-			{format(time)}
-			click anywhere to {paused ? 'play' : 'pause'} / drag to seek
-			{format(duration)}
-		

-	

-

diff --git a/site/content/examples/05-bindings/09-dimensions/App.svelte b/site/content/examples/05-bindings/09-dimensions/App.svelte
deleted file mode 100644
index ca992599c1d1..000000000000
--- a/site/content/examples/05-bindings/09-dimensions/App.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-
-
-
-
-
-
-
-
size: {w}px x {h}px

-
-

-	{text}
-

\ 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 000000000000..de89b1be8d50
--- /dev/null
+++ b/site/content/examples/05-bindings/09-media-elements/App.svelte
@@ -0,0 +1,131 @@
+
+
+
Caminandes: Llamigos

+
From Blender Studio. CC-BY

+
+

+	
+			
+	
+
+	

+		
+
+		

+			{format(time)}
+			click anywhere to {paused ? 'play' : 'pause'} / drag to seek
+			{format(duration)}
+		

+	

+

+
+
diff --git a/site/content/examples/05-bindings/08-media-elements/meta.json b/site/content/examples/05-bindings/09-media-elements/meta.json
similarity index 100%
rename from site/content/examples/05-bindings/08-media-elements/meta.json
rename to site/content/examples/05-bindings/09-media-elements/meta.json
diff --git a/site/content/examples/05-bindings/10-bind-this/App.svelte b/site/content/examples/05-bindings/10-bind-this/App.svelte
deleted file mode 100644
index 439d24067038..000000000000
--- a/site/content/examples/05-bindings/10-bind-this/App.svelte
+++ /dev/null
@@ -1,55 +0,0 @@
-
-
-
-
-
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 000000000000..c955aeba8e04
--- /dev/null
+++ b/site/content/examples/05-bindings/10-dimensions/App.svelte
@@ -0,0 +1,20 @@
+
+
+
+
+
+
size: {w}px x {h}px

+
+

+	{text}
+

+
+
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/09-dimensions/meta.json b/site/content/examples/05-bindings/10-dimensions/meta.json
similarity index 100%
rename from site/content/examples/05-bindings/09-dimensions/meta.json
rename to site/content/examples/05-bindings/10-dimensions/meta.json
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 000000000000..ddf37a9be3b2
--- /dev/null
+++ b/site/content/examples/05-bindings/11-bind-this/App.svelte
@@ -0,0 +1,55 @@
+
+
+
+
+
diff --git a/site/content/examples/05-bindings/10-bind-this/meta.json b/site/content/examples/05-bindings/11-bind-this/meta.json
similarity index 100%
rename from site/content/examples/05-bindings/10-bind-this/meta.json
rename to site/content/examples/05-bindings/11-bind-this/meta.json
diff --git a/site/content/examples/05-bindings/11-component-bindings/App.svelte b/site/content/examples/05-bindings/12-component-bindings/App.svelte
similarity index 100%
rename from site/content/examples/05-bindings/11-component-bindings/App.svelte
rename to site/content/examples/05-bindings/12-component-bindings/App.svelte
diff --git a/site/content/examples/05-bindings/11-component-bindings/Keypad.svelte b/site/content/examples/05-bindings/12-component-bindings/Keypad.svelte
similarity index 98%
rename from site/content/examples/05-bindings/11-component-bindings/Keypad.svelte
rename to site/content/examples/05-bindings/12-component-bindings/Keypad.svelte
index c457a15cb50e..631f7964e285 100644
--- a/site/content/examples/05-bindings/11-component-bindings/Keypad.svelte
+++ b/site/content/examples/05-bindings/12-component-bindings/Keypad.svelte
@@ -10,19 +10,6 @@
 	const submit = () => dispatch('submit');
 
 
-
-
 

 	
 	
@@ -37,4 +24,17 @@
 	
 	
 	
-

\ No newline at end of file
+
+
+
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/11-component-bindings/meta.json b/site/content/examples/05-bindings/12-component-bindings/meta.json
similarity index 100%
rename from site/content/examples/05-bindings/11-component-bindings/meta.json
rename to site/content/examples/05-bindings/12-component-bindings/meta.json
diff --git a/site/content/examples/06-lifecycle/00-onmount/App.svelte b/site/content/examples/06-lifecycle/00-onmount/App.svelte
index 1b83727627bd..06997161f0f4 100644
--- a/site/content/examples/06-lifecycle/00-onmount/App.svelte
+++ b/site/content/examples/06-lifecycle/00-onmount/App.svelte
@@ -4,11 +4,25 @@
 	let photos = [];
 
 	onMount(async () => {
-		const res = await fetch(`https://jsonplaceholder.typicode.com/photos?_limit=20`);
+		const res = await fetch(`/tutorial/api/album`);
 		photos = await res.json();
 	});
 
 
+
Photo album

+
+

+	{#each photos as photo}
+		

+			{photo.title}
+			
{photo.title}

+		

+	{:else}
+		
+		
loading...

+	{/each}
+

+
 
-
-
Photo album

-
-

-	{#each photos as photo}
-		

-			{photo.title}
-			
{photo.title}

-		

-	{:else}
-		
-		
loading...

-	{/each}
-

\ 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
index 419e763c57e1..ee3bca32df86 100644
--- a/site/content/examples/06-lifecycle/02-update/App.svelte
+++ b/site/content/examples/06-lifecycle/02-update/App.svelte
@@ -51,6 +51,20 @@
 	}
 
 
+

+	
Eliza

+
+	

+		{#each comments as comment}
+			

+				{comment.text}
+			

+		{/each}
+	

+
+	
+

+
 
-
-

-	
Eliza

-
-	

-		{#each comments as comment}
-			

-				{comment.text}
-			

-		{/each}
-	

-
-	
-

diff --git a/site/content/examples/06-lifecycle/03-tick/App.svelte b/site/content/examples/06-lifecycle/03-tick/App.svelte
index 477b5ffb79db..e678020d3dc9 100644
--- a/site/content/examples/06-lifecycle/03-tick/App.svelte
+++ b/site/content/examples/06-lifecycle/03-tick/App.svelte
@@ -27,11 +27,11 @@
 	}
 
 
+
+
 
-
-
+
\ 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
index ee542f789d19..61e55401a5c5 100644
--- a/site/content/examples/07-stores/00-writable-stores/App.svelte
+++ b/site/content/examples/07-stores/00-writable-stores/App.svelte
@@ -4,14 +4,14 @@
 	import Decrementer from './Decrementer.svelte';
 	import Resetter from './Resetter.svelte';
 
-	let count_value;
+	let countValue;
 
 	const unsubscribe = count.subscribe(value => {
-		count_value = value;
+		countValue = value;
 	});
 
 
-
The count is {count_value}

+
The count is {countValue}

 
 
 
diff --git a/site/content/examples/08-motion/00-tweened/App.svelte b/site/content/examples/08-motion/00-tweened/App.svelte
index 83f3b50a0474..ee3c7a1b5d83 100644
--- a/site/content/examples/08-motion/00-tweened/App.svelte
+++ b/site/content/examples/08-motion/00-tweened/App.svelte
@@ -8,13 +8,6 @@
 	});
 
 
-
-
 
 
 
\ No newline at end of file
+
+
+
\ 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
index 9918cf40e8b4..251bf640ee62 100644
--- a/site/content/examples/08-motion/01-spring/App.svelte
+++ b/site/content/examples/08-motion/01-spring/App.svelte
@@ -9,11 +9,6 @@
 	let size = spring(10);
 
 
-
-
 

 	

+
+
diff --git a/site/content/examples/11-easing/00-easing/Controls.svelte b/site/content/examples/11-easing/00-easing/Controls.svelte
index 66a297323f4a..3123b8a25b89 100644
--- a/site/content/examples/11-easing/00-easing/Controls.svelte
+++ b/site/content/examples/11-easing/00-easing/Controls.svelte
@@ -14,6 +14,72 @@
 	$: mobile = width && width < 600;
 
 
+

+		

+			
Ease

+			{#if mobile}
+				
+			{:else}
+				
    
+					{#each [...eases] as [name]}
+						
  •  current_ease = name}
+						>
+							{name}
+						
    • 
+					{/each}
+				

+			{/if}
+			
Type

+			{#if mobile }
+				
+			{:else}
+				
    
+					{#each types as [name, type]}
+						
  •  current_type = type}
+						>
+							{name}
+					
    • 
+					{/each}
+				

+			{/if}
+		

+		

+			Duration
+		

+		

+			
+				
+				
+				
+			
+			
+		

+	

+
+	
 
-
-

-		

-			
Ease

-			{#if mobile}
-				
-			{:else}
-				
    
-					{#each [...eases] as [name]}
-						
  •  current_ease = name}
-						>
-							{name}
-						
    • 
-					{/each}
-				

-			{/if}
-			
Type

-			{#if mobile }
-				
-			{:else}
-				
    
-					{#each types as [name, type]}
-						
  •  current_type = type}
-						>
-							{name}
-					
    • 
-					{/each}
-				

-			{/if}
-		

-		

-			Duration
-		

-		

-			
-				
-				
-				
-			
-			
-		

-	

\ No newline at end of file
+
\ 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
index e704f46cf700..c0c9d4791377 100644
--- a/site/content/examples/11-easing/00-easing/Grid.svelte
+++ b/site/content/examples/11-easing/00-easing/Grid.svelte
@@ -2,19 +2,6 @@
 	export let x, y;
 
 
-
-
 
 
 
\ 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
index 49d3a7f8093b..44f7e484a198 100644
--- a/site/content/examples/12-svg/01-clock/App.svelte
+++ b/site/content/examples/12-svg/01-clock/App.svelte
@@ -20,44 +20,6 @@
 	});
 
 
-
-
 
 	
 
@@ -101,4 +63,42 @@
 		
 		
 	
-
\ No newline at end of file
+
+
+
\ 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
index b9002bcaeafe..7ad21545ff10 100644
--- a/site/content/examples/12-svg/02-bar-chart/App.svelte
+++ b/site/content/examples/12-svg/02-bar-chart/App.svelte
@@ -18,7 +18,7 @@
 	let height = 200;
 
 	function formatMobile(tick) {
-		return "'" + tick % 100;
+		return "'" + tick.toString().slice(-2);
 	}
 
 	$: xScale = scaleLinear()
@@ -33,6 +33,42 @@
 	$: barWidth = innerWidth / xTicks.length;
 
 
+
US birthrate by year

+
+

+	
+		
+		
+			{#each yTicks as tick}
+				
+					
+					{tick} {tick === 20 ? ' per 1,000 population' : ''}
+				
+			{/each}
+		
+
+		
+		
+			{#each points as point, i}
+				
+					{width > 380 ? point.year : formatMobile(point.year)}
+				
+			{/each}
+		
+
+		
+			{#each points as point, i}
+				
+			{/each}
+		
+	
+

+
 
-
-
US birthrate by year

-
-

-	
-		
-		
-			{#each yTicks as tick}
-				
-					
-					{tick} {tick === 20 ? ' per 1,000 population' : ''}
-				
-			{/each}
-		
-
-		
-		
-			{#each points as point, i}
-				
-					{width > 380 ? point.year : formatMobile(point.year)}
-				
-			{/each}
-		
-
-		
-			{#each points as point, i}
-				
-			{/each}
-		
-	
-

diff --git a/site/content/examples/12-svg/03-area-chart/App.svelte b/site/content/examples/12-svg/03-area-chart/App.svelte
index 6aec5943dce6..2fe39280e403 100644
--- a/site/content/examples/12-svg/03-area-chart/App.svelte
+++ b/site/content/examples/12-svg/03-area-chart/App.svelte
@@ -23,7 +23,7 @@
 	$: area = `${path}L${xScale(maxX)},${yScale(0)}L${xScale(minX)},${yScale(0)}Z`;
 
 	function formatMobile (tick) {
-		return "'" + tick % 100;
+		return "'" + tick.toString().slice(-2);
 	}
 
 
@@ -108,4 +108,4 @@
 	.path-area {
 		fill: rgba(0,100,100,0.2);
 	}
-
+
\ 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
index 72cb04f0d86c..5cb65b397ec2 100644
--- a/site/content/examples/12-svg/03-area-chart/data.js
+++ b/site/content/examples/12-svg/03-area-chart/data.js
@@ -36,5 +36,10 @@ export default [
 	{ x: 2013, y: 5.35 },
 	{ x: 2014, y: 5.28 },
 	{ x: 2015, y: 4.63 },
-	{ x: 2016, y: 4.72 }
-];
\ No newline at end of file
+	{ 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/04-scatterplot/App.svelte b/site/content/examples/12-svg/04-scatterplot/App.svelte
index 42a0660b87f9..1ceb1d221c21 100644
--- a/site/content/examples/12-svg/04-scatterplot/App.svelte
+++ b/site/content/examples/12-svg/04-scatterplot/App.svelte
@@ -3,6 +3,15 @@
 	import data from './data.js';
 
 
+

+	
Anscombe's quartet

+
+	
+	
+	
+	
+

+
 
-
-

-	
Anscombe's quartet

-
-	
-	
-	
-	
-

\ No newline at end of file
+
\ 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
index f7a46899fa30..7ae113ab06b3 100644
--- a/site/content/examples/12-svg/04-scatterplot/Scatterplot.svelte
+++ b/site/content/examples/12-svg/04-scatterplot/Scatterplot.svelte
@@ -92,4 +92,4 @@
 	.y-axis text {
 		text-anchor: end;
 	}
-
+
\ 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
index 6e1e636b2094..7f3a774a2cb5 100644
--- a/site/content/examples/12-svg/05-svg-transitions/App.svelte
+++ b/site/content/examples/12-svg/05-svg-transitions/App.svelte
@@ -7,6 +7,38 @@
 	let visible = true;
 
 
+{#if visible}
+	
+		
+			
+			
+		
+	
+
+	

+		{#each 'SVELTE' as char, i}
+			{char}
+		{/each}
+	

+{/if}
+
+
+
+
+
 
-
-{#if visible}
-	
-		
-			
-			
-		
-	
-
-	

-		{#each 'SVELTE' as char, i}
-			{char}
-		{/each}
-	

-{/if}
-
-
-
-
+
\ 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
index 171f82762c03..79214ec81ff8 100644
--- a/site/content/examples/13-actions/00-actions/App.svelte
+++ b/site/content/examples/13-actions/00-actions/App.svelte
@@ -1,30 +1,16 @@
 
 
+
+{#if showModal}
+	
 (showModal = false)}>
+		Click outside me!
+	

+{/if}
+
 
-
-

\ No newline at end of file
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 000000000000..e8983c1457ff
--- /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/03-actions-pannable/App.svelte b/site/content/examples/13-actions/03-actions-pannable/App.svelte
new file mode 100644
index 000000000000..4548a5cbb6d2
--- /dev/null
+++ b/site/content/examples/13-actions/03-actions-pannable/App.svelte
@@ -0,0 +1,51 @@
+
+
+

+
+
\ 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 000000000000..b97be8071f98
--- /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/00-actions/pannable.js b/site/content/examples/13-actions/03-actions-pannable/pannable.js
similarity index 100%
rename from site/content/examples/13-actions/00-actions/pannable.js
rename to site/content/examples/13-actions/03-actions-pannable/pannable.js
diff --git a/site/content/examples/14-classes/00-classes/App.svelte b/site/content/examples/14-classes/00-classes/App.svelte
index 4da386991d5d..1073242bcfda 100644
--- a/site/content/examples/14-classes/00-classes/App.svelte
+++ b/site/content/examples/14-classes/00-classes/App.svelte
@@ -2,17 +2,6 @@
 	let current = 'foo';
 
 
-
-
 
\ No newline at end of file
+>baz
+
+
\ 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
index 0f4e0d9f2438..c91385e4e535 100644
--- a/site/content/examples/14-classes/01-class-shorthand/App.svelte
+++ b/site/content/examples/14-classes/01-class-shorthand/App.svelte
@@ -2,12 +2,6 @@
 	let big = false;
 
 
-
-