document lib

Author: Rich Harris

content/tutorial/03-sveltekit/05-shared-modules/01-lib/README.md

@@ -0,0 +1,31 @@
+---
+title: The $lib alias
+---
+
+Because SvelteKit uses directory-based routing, it's easy to place modules and components alongside the routes that use them. A good rule of thumb is 'put code close to where it's used'. 
+
+Sometimes, code is used in multiple places. When this happens, it's useful to have a place to put them that can be access by all routes without needing to prefix imports with `../../../../`. In SvelteKit, that place is the `src/lib` directory. Anything inside this directory can be accessed by any module in `src` via the `$lib` alias.
+
+Both `+page.svelte` files in this exercise import `src/lib/message.js`. But if you navigate to `/a/deeply/nested/route`, the app breaks, because we got the prefix wrong. Update it to use `$lib/message.js` instead:
+
+```svelte
+/// file: src/routes/a/deeply/nested/route/+page.svelte
+<script>
+	import { message } from +++'$lib/message.js'+++;
+</script>
+
+<h1>a deeply nested route</h1>
+<p>{message}</p>
+```
+
+Do the same for `src/routes/+page.svelte`:
+
+```svelte
+/// file: src/routes/+page.svelte
+<script>
+	import { message } from +++'$lib/message.js'+++;
+</script>
+
+<h1>home</h1>
+<p>{message}</p>
+```

content/tutorial/03-sveltekit/05-shared-modules/01-lib/app-a/src/lib/message.js

@@ -0,0 +1 @@
+export const message = 'hello from $lib/message';

content/tutorial/03-sveltekit/05-shared-modules/01-lib/app-a/src/routes/+layout.svelte

@@ -0,0 +1,6 @@
+<nav>
+	<a href="/">home</a>
+	<a href="/a/deeply/nested/route">a deeply nested route</a>
+</nav>
+
+<slot />

content/tutorial/03-sveltekit/05-shared-modules/01-lib/app-a/src/routes/+page.svelte

@@ -0,0 +1,6 @@
+<script>
+	import { message } from '../lib/message.js';
+</script>
+
+<h1>home</h1>
+<p>{message}</p>

content/tutorial/03-sveltekit/05-shared-modules/01-lib/app-a/src/routes/a/deeply/nested/route/+page.svelte

@@ -0,0 +1,6 @@
+<script>
+	import { message } from '../../../../../../lib/message.js';
+</script>
+
+<h1>a deeply nested route</h1>
+<p>{message}</p>

content/tutorial/03-sveltekit/05-shared-modules/01-lib/app-b/src/routes/+page.svelte

@@ -0,0 +1,6 @@
+<script>
+	import { message } from '$lib/message.js';
+</script>
+
+<h1>home</h1>
+<p>{message}</p>

content/tutorial/03-sveltekit/05-shared-modules/01-lib/app-b/src/routes/a/deeply/nested/route/+page.svelte

@@ -0,0 +1,6 @@
+<script>
+	import { message } from '$lib/message.js';
+</script>
+
+<h1>a deeply nested route</h1>
+<p>{message}</p>

content/tutorial/03-sveltekit/05-shared-modules/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "Shared modules"
+}