diff --git a/.editorconfig b/.editorconfig index ed2a319d58..90846de5ee 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 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/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md deleted file mode 100644 index 2aa885cfcb..0000000000 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -name: Bug report -about: Create a report to help us improve -title: '' -labels: 'Bug' -assignees: '' - ---- - -## Is this about svelte@next? This project is currently in a pre-release stage and breaking changes may occur at any time. Please do not post any kind of bug reports or questions on GitHub about it. - -**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:** -To make your life easier, just run `npx envinfo --system --npmPackages svelte,rollup,webpack --binaries --browsers` and paste the output here. - -- 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 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.md b/.github/ISSUE_TEMPLATE/feature_request.md deleted file mode 100644 index 923bfdb50c..0000000000 --- a/.github/ISSUE_TEMPLATE/feature_request.md +++ /dev/null @@ -1,28 +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 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/ISSUE_TEMPLATE/questions-and-help.md b/.github/ISSUE_TEMPLATE/questions-and-help.md deleted file mode 100644 index a6e0dc6e19..0000000000 --- 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 d14a0f9fe4..7de5a35e13 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -1,5 +1,6 @@ ### 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. diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 4e04386fcc..bbfde04f67 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: 10 + 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: 5 + 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 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 index a471c3aaa2..22389f683c 100644 --- a/.gitignore +++ b/.gitignore @@ -8,6 +8,8 @@ node_modules /compiler.d.ts /compiler.*js /index.*js +/ssr.*js +/action /internal /store /easing @@ -15,23 +17,8 @@ node_modules /transition /animate /scratch/ -/coverage/ -/coverage.lcov /test/*/samples/_ /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/CHANGELOG.md b/CHANGELOG.md index a9ff0e72de..a884c0cc6e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,348 @@ # Svelte changelog +## 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/06-select-bindings/App.svelte b/site/content/examples/05-bindings/06-select-bindings/App.svelte
index 3f1e7fa7e1..a3607a6f4f 100644
--- a/site/content/examples/05-bindings/06-select-bindings/App.svelte
+++ b/site/content/examples/05-bindings/06-select-bindings/App.svelte
@@ -14,10 +14,6 @@
 	}
 
 
-
-
 
Insecurity questions

 
 

@@ -36,4 +32,8 @@
 	
 

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

\ No newline at end of file
+
selected question {selected ? selected.id : '[waiting...]'}

+
+
\ 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
index 45345a39ff..de89b1be8d 100644
--- a/site/content/examples/05-bindings/09-media-elements/App.svelte
+++ b/site/content/examples/05-bindings/09-media-elements/App.svelte
@@ -7,37 +7,35 @@
 	let showControls = true;
 	let showControlsTimeout;
 
-	function handleMousemove(e) {
+	// 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 (!(e.buttons & 1)) return; // mouse not down
 		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 * (e.clientX - left) / (right - left);
+		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) {
-		// we can't rely on the built-in click event, because it fires
-		// after a drag — we have to listen for clicks ourselves
+		lastMouseDown = new Date();
+	}
 
-		function handleMouseup() {
+	function handleMouseup(e) {
+		if (new Date() - lastMouseDown < 300) {
 			if (paused) e.target.play();
 			else e.target.pause();
-			cancel();
-		}
-
-		function cancel() {
-			e.target.removeEventListener('mouseup', handleMouseup);
 		}
-
-		e.target.addEventListener('mouseup', handleMouseup);
-
-		setTimeout(cancel, 200);
 	}
 
 	function format(seconds) {
@@ -51,6 +49,34 @@
 	}
 
 
+
Caminandes: Llamigos

+
From Blender Studio. CC-BY

+
+

+	
+			
+	
+
+	

+		
+
+		

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

+	

+

+
 
-
-
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/10-dimensions/App.svelte b/site/content/examples/05-bindings/10-dimensions/App.svelte
index ca992599c1..c955aeba8e 100644
--- a/site/content/examples/05-bindings/10-dimensions/App.svelte
+++ b/site/content/examples/05-bindings/10-dimensions/App.svelte
@@ -5,11 +5,6 @@
 	let text = 'edit me';
 
 
-
-
 
 
 
@@ -17,4 +12,9 @@
 
 

 	{text}
-

\ No newline at end of file
+
+
+
\ 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
index 439d240670..ddf37a9be3 100644
--- a/site/content/examples/05-bindings/11-bind-this/App.svelte
+++ b/site/content/examples/05-bindings/11-bind-this/App.svelte
@@ -38,18 +38,18 @@
 	});
 
 
+
+
 
-
-
diff --git a/site/content/examples/05-bindings/12-component-bindings/Keypad.svelte b/site/content/examples/05-bindings/12-component-bindings/Keypad.svelte
index c457a15cb5..631f7964e2 100644
--- a/site/content/examples/05-bindings/12-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/06-lifecycle/00-onmount/App.svelte b/site/content/examples/06-lifecycle/00-onmount/App.svelte
index 1b83727627..06997161f0 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 419e763c57..ee3bca32df 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 477b5ffb79..e678020d3d 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 ee542f789d..61e55401a5 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 83f3b50a04..ee3c7a1b5d 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 9918cf40e8..251bf640ee 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 66a297323f..3123b8a25b 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 e704f46cf7..c0c9d47913 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 49d3a7f809..44f7e484a1 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 b9002bcaea..7ad21545ff 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 6aec5943dc..2fe39280e4 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 72cb04f0d8..5cb65b397e 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 42a0660b87..1ceb1d221c 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 f7a46899fa..7ae113ab06 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 6e1e636b20..7f3a774a2c 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 171f82762c..79214ec81f 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 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/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 @@
+
+
+

+
+
\ 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/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 4da386991d..1073242bcf 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 0f4e0d9f24..c91385e4e5 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;
 
 
-
-