From 037ac2f55a4bd78f8f2865bf5c2e3bf2e22991f3 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Fri, 23 Jun 2023 17:20:40 +0200
Subject: [PATCH] docs: update transitions tutorial (#8822)

fixes #8820
---
 .../app-a/App.svelte                            |  0
 .../app-b/App.svelte                            |  2 +-
 .../07-global-transitions/text.md               | 17 +++++++++++++++++
 .../10-transitions/07-local-transitions/text.md | 15 ---------------
 packages/playground/start.js                    |  6 ++----
 sites/svelte.dev/scripts/generate_examples.js   |  3 ++-
 sites/svelte.dev/src/routes/docs/+page.svelte   |  2 +-
 .../src/routes/tutorial/[slug]/+page.server.js  | 11 +++++++++--
 8 files changed, 32 insertions(+), 24 deletions(-)
 rename documentation/tutorial/10-transitions/{07-local-transitions => 07-global-transitions}/app-a/App.svelte (100%)
 rename documentation/tutorial/10-transitions/{07-local-transitions => 07-global-transitions}/app-b/App.svelte (94%)
 create mode 100644 documentation/tutorial/10-transitions/07-global-transitions/text.md
 delete mode 100644 documentation/tutorial/10-transitions/07-local-transitions/text.md

diff --git a/documentation/tutorial/10-transitions/07-local-transitions/app-a/App.svelte b/documentation/tutorial/10-transitions/07-global-transitions/app-a/App.svelte
similarity index 100%
rename from documentation/tutorial/10-transitions/07-local-transitions/app-a/App.svelte
rename to documentation/tutorial/10-transitions/07-global-transitions/app-a/App.svelte
diff --git a/documentation/tutorial/10-transitions/07-local-transitions/app-b/App.svelte b/documentation/tutorial/10-transitions/07-global-transitions/app-b/App.svelte
similarity index 94%
rename from documentation/tutorial/10-transitions/07-local-transitions/app-b/App.svelte
rename to documentation/tutorial/10-transitions/07-global-transitions/app-b/App.svelte
index 57f24e93b6..93de6a0cdc 100644
--- a/documentation/tutorial/10-transitions/07-local-transitions/app-b/App.svelte
+++ b/documentation/tutorial/10-transitions/07-global-transitions/app-b/App.svelte
@@ -17,7 +17,7 @@
 
 {#if showItems}
 	{#each items.slice(0, i) as item}
-		<div transition:slide|local>
+		<div transition:slide|global>
 			{item}
 		</div>
 	{/each}
diff --git a/documentation/tutorial/10-transitions/07-global-transitions/text.md b/documentation/tutorial/10-transitions/07-global-transitions/text.md
new file mode 100644
index 0000000000..8f31620623
--- /dev/null
+++ b/documentation/tutorial/10-transitions/07-global-transitions/text.md
@@ -0,0 +1,17 @@
+---
+title: Global transitions
+---
+
+Ordinarily, transitions will only play on elements when their direct containing block is added or destroyed. In the example here, toggling the visibility of the entire list does not apply transitions to individual list elements.
+
+Instead, we'd like transitions to not only play when individual items are added and removed with the slider but also when we toggle the checkbox.
+
+We can achieve this with a _global_ transition, which plays when _any_ block containing the transitions is added or removed:
+
+```svelte
+<div transition:slide|global>
+	{item}
+</div>
+```
+
+> In Svelte 3, transitions were global by default and you had to use the `|local` modifier to make them local.
diff --git a/documentation/tutorial/10-transitions/07-local-transitions/text.md b/documentation/tutorial/10-transitions/07-local-transitions/text.md
deleted file mode 100644
index 8b916fbbc9..0000000000
--- a/documentation/tutorial/10-transitions/07-local-transitions/text.md
+++ /dev/null
@@ -1,15 +0,0 @@
----
-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:
-
-```svelte
-<div transition:slide|local>
-	{item}
-</div>
-```
diff --git a/packages/playground/start.js b/packages/playground/start.js
index af2ed10a54..af37a40e26 100644
--- a/packages/playground/start.js
+++ b/packages/playground/start.js
@@ -1,13 +1,11 @@
 import { readFileSync, writeFileSync } from 'node:fs';
 import path from 'node:path';
+import { fileURLToPath } from 'node:url';
 import { watch } from 'rollup';
 import serve from 'rollup-plugin-serve';
 import * as svelte from '../svelte/src/compiler/index.js';
 
-let __dirname = new URL('.', import.meta.url).pathname;
-if (process.platform === 'win32') {
-	__dirname = __dirname.slice(1); // else path.resolve fucks up
-}
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
 
 /** @returns {import('rollup').Plugin}*/
 function create_plugin(ssr = false) {
diff --git a/sites/svelte.dev/scripts/generate_examples.js b/sites/svelte.dev/scripts/generate_examples.js
index 5e7419ccf5..bbdf05fae2 100644
--- a/sites/svelte.dev/scripts/generate_examples.js
+++ b/sites/svelte.dev/scripts/generate_examples.js
@@ -1,8 +1,9 @@
+import { fileURLToPath } from 'node:url';
 import { get_examples_data } from '../src/lib/server/examples/index.js';
 import fs from 'node:fs';
 
 const examples_data = get_examples_data(
-	new URL('../../../documentation/examples', import.meta.url).pathname
+	fileURLToPath(new URL('../../../documentation/examples', import.meta.url))
 );
 
 try {
diff --git a/sites/svelte.dev/src/routes/docs/+page.svelte b/sites/svelte.dev/src/routes/docs/+page.svelte
index 39c72c9851..3dec6b3a56 100644
--- a/sites/svelte.dev/src/routes/docs/+page.svelte
+++ b/sites/svelte.dev/src/routes/docs/+page.svelte
@@ -210,7 +210,7 @@
 	}
 
 	onMount(() => {
-		console.log(get_old_new_ids_map());
+		console.log(get_old_new_ids_map()); // for debugging purposes in prod
 		goto(get_url_to_redirect_to(), { replaceState: true });
 	});
 </script>
diff --git a/sites/svelte.dev/src/routes/tutorial/[slug]/+page.server.js b/sites/svelte.dev/src/routes/tutorial/[slug]/+page.server.js
index 29da6cc872..678c11a2ca 100644
--- a/sites/svelte.dev/src/routes/tutorial/[slug]/+page.server.js
+++ b/sites/svelte.dev/src/routes/tutorial/[slug]/+page.server.js
@@ -3,11 +3,13 @@ import {
 	get_tutorial_data,
 	get_tutorial_list
 } from '$lib/server/tutorial/index.js';
-import { error } from '@sveltejs/kit';
+import { error, redirect } from '@sveltejs/kit';
 
 export const prerender = true;
 
 export async function load({ params }) {
+	if (params.slug === 'local-transitions') throw redirect(307, '/tutorial/global-transitions');
+
 	const tutorial_data = get_tutorial_data();
 	const tutorials_list = get_tutorial_list(tutorial_data);
 
@@ -24,7 +26,12 @@ export async function load({ params }) {
 
 export async function entries() {
 	const tutorials_list = get_tutorial_list(get_tutorial_data());
-	return tutorials_list
+	const slugs = tutorials_list
 		.map(({ tutorials }) => tutorials)
 		.flatMap((val) => val.map(({ slug }) => ({ slug })));
+
+	// to force redirect
+	slugs.push({ slug: 'local-transitions' });
+
+	return slugs;
 }