implement $lib (#511)

* implement $lib - closes #480

* clarify

* changeset

.changeset/great-kangaroos-eat.md

@@ -0,0 +1,6 @@
+---
+'create-svelte': patch
+'@sveltejs/kit': patch
+---
+
+Add \$lib alias

documentation/migrating/01-migrating.md

@@ -7,10 +7,10 @@ SvelteKit is largely backwards-compatible with Sapper. However, there are a numb
 - Remove `rollup.config.js` or `webpack.config.js` and replace with [`vite.config.js`](https://github.com/sveltejs/kit/blob/master/packages/create-svelte/template/vite.config.js)
 - Add a [`svelte.config.cjs` ](https://github.com/sveltejs/kit/blob/master/packages/create-svelte/template/svelte.config.cjs) with the adapter of your choice
 - Update your `template.html` to [`app.html`](https://github.com/sveltejs/kit/blob/master/packages/create-svelte/template/src/app.html)
-	- It should have a `<div id="svelte">` (or `id` matching `target` in `svelte.config.cjs`)
+  - It should have a `<div id="svelte">` (or `id` matching `target` in `svelte.config.cjs`)
 - The error and layout pages should prefixed by `$` instead of `_`
 - Replace imports from `@sapper/app` with imports from `$app/navigation` and `$app/stores` and update APIs accordingly
-- If you have `src/node_modules/components`, move it to `src/components` and update the import path to `$components`
+- If you have source code in `src/node_modules`, move it to `src/lib` and update the import path to `$lib`
 - Move any custom `client.js` code to `$layout.svelte` and put it in an `if (browser)` check (`import { browser } from "$app/env";`).
 - `preload` has been renamed to `load`. It has a new method signature and return values
 - `sapper:prefetch` and `sapper:noscroll` have been renamed to `sveltekit:prefetch` and `sveltekit:noscroll`

examples/hn.svelte.dev/src/routes/$layout.svelte

@@ -4,9 +4,9 @@
 
 <script>
 	import { page, navigating } from '$app/stores';
-	import Nav from '$components/Nav.svelte';
-	import PreloadingIndicator from '$components/PreloadingIndicator.svelte';
-	import ThemeToggler from '$components/ThemeToggler.svelte';
+	import Nav from '$lib/Nav.svelte';
+	import PreloadingIndicator from '$lib/PreloadingIndicator.svelte';
+	import ThemeToggler from '$lib/ThemeToggler.svelte';
 
 	$: section = $page.path.split('/')[1];
 </script>

examples/hn.svelte.dev/tsconfig.json

@@ -2,7 +2,7 @@
 	"compilerOptions": {
 		"baseUrl": ".",
 		"paths": {
-			"$components/*": ["./src/components/*"]
+			"$lib/*": ["./src/lib/*"]
 		}
 	}
 }

examples/hn.svelte.dev/vite.config.js

@@ -1,17 +1,12 @@
 // Consult https://vitejs.dev/config/ to learn about these options
-import { join, resolve } from 'path';
+import { join } from 'path';
 import { readFileSync } from 'fs';
 import { cwd } from 'process';
 
 const pkg = JSON.parse(readFileSync(join(cwd(), 'package.json')));
 
 /** @type {import('vite').UserConfig} */
 export default {
-	resolve: {
-		alias: {
-			$components: resolve('src/components')
-		}
-	},
 	ssr: {
 		noExternal: Object.keys(pkg.dependencies || {})
 	}

examples/realworld.svelte.dev/src/components/ArticleList/ArticlePreview.svelte → examples/realworld.svelte.dev/src/lib/ArticleList/ArticlePreview.svelte

@@ -1,5 +1,5 @@
 <script>
-	import * as api from '$common/api.js';
+	import * as api from '$lib/api.js';
 
 	export let article;
 	export let user;

examples/realworld.svelte.dev/src/components/ArticleList/index.svelte → examples/realworld.svelte.dev/src/lib/ArticleList/index.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { session, page } from '$app/stores';
-	import * as api from '$common/api.js';
+	import * as api from '$lib/api.js';
 	import ArticlePreview from './ArticlePreview.svelte';
 	import ListPagination from './ListPagination.svelte';
 

examples/realworld.svelte.dev/src/components/Home.svelte → examples/realworld.svelte.dev/src/lib/Home.svelte

@@ -2,7 +2,7 @@
 	import { onMount } from 'svelte';
 	import MainView from './MainView/index.svelte';
 	import Tags from './Tags.svelte';
-	import * as api from '$common/api.js';
+	import * as api from '$lib/api.js';
 
 	export let p = 1;
 

examples/realworld.svelte.dev/src/routes/$layout.svelte

@@ -1,5 +1,5 @@
 <script>
-	import Nav from '$components/Nav.svelte';
+	import Nav from '$lib/Nav.svelte';
 
 	export let segment;
 </script>

examples/realworld.svelte.dev/src/routes/[p].svelte

@@ -1,6 +1,6 @@
 <script>
 	import { page } from '$app/stores';
-	import Home from '$components/Home.svelte';
+	import Home from '$lib/Home.svelte';
 </script>
 
 <Home p={+$page.params.p}/>

examples/realworld.svelte.dev/src/routes/article/[slug].svelte

@@ -1,5 +1,5 @@
 <script context="module">
-	import * as api from '$common/api.js';
+	import * as api from '$lib/api.js';
 
 	export async function load({ page }) {
 		const { slug } = page.params;

examples/realworld.svelte.dev/src/routes/article/_ArticleMeta.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { goto } from '$app/navigation';
-	import * as api from '$common/api.js';
+	import * as api from '$lib/api.js';
 
 	export let article;
 	export let user;

examples/realworld.svelte.dev/src/routes/article/_Comment.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { createEventDispatcher } from 'svelte';
-	import * as api from '$common/api.js';
+	import * as api from '$lib/api.js';
 
 	export let comment;
 	export let slug;

examples/realworld.svelte.dev/src/routes/article/_CommentContainer.svelte

@@ -1,5 +1,5 @@
 <script>
-	import ListErrors from '$components/ListErrors.svelte';
+	import ListErrors from '$lib/ListErrors.svelte';
 	import CommentInput from './_CommentInput.svelte';
 	import Comment from './_Comment.svelte';
 

examples/realworld.svelte.dev/src/routes/article/_CommentInput.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { createEventDispatcher } from 'svelte';
-	import * as api from '$common/api.js';
+	import * as api from '$lib/api.js';
 
 	export let slug;
 	export let user;

examples/realworld.svelte.dev/src/routes/auth/login.js

@@ -1,4 +1,4 @@
-import * as api from '$common/api.js';
+import * as api from '$lib/api.js';
 
 export async function post({ body }) {
 	const response = await api.post('users/login', {
@@ -8,4 +8,4 @@ export async function post({ body }) {
 	return {
 		body: response
 	};
-}
+}

examples/realworld.svelte.dev/src/routes/auth/register.js

@@ -1,9 +1,9 @@
-import * as api from '$common/api.js';
+import * as api from '$lib/api.js';
 
 export function post(req, res) {
 	const user = req.body;
 
-	api.post('users', { user }).then(response => {
+	api.post('users', { user }).then((response) => {
 		if (response.user) {
 			req.session.user = response.user;
 		}
@@ -12,4 +12,4 @@ export function post(req, res) {
 
 		res.end(JSON.stringify(response));
 	});
-}
+}

examples/realworld.svelte.dev/src/routes/auth/save.js

@@ -1,9 +1,9 @@
-import * as api from '$common/api.js';
+import * as api from '$lib/api.js';
 
 export function post(req, res) {
 	const user = req.body;
 
-	api.put('user', { user }, req.session.user && req.session.user.token).then(response => {
+	api.put('user', { user }, req.session.user && req.session.user.token).then((response) => {
 		if (response.user) {
 			req.session.user = response.user;
 		}
@@ -12,4 +12,4 @@ export function post(req, res) {
 
 		res.end(JSON.stringify(response));
 	});
-}
+}

examples/realworld.svelte.dev/src/routes/editor/[slug].svelte

@@ -1,5 +1,5 @@
 <script context="module">
-	import * as api from '$common/api.js';
+	import * as api from '$lib/api.js';
 
 	export async function load({ page, session }) {
 		if (!session.user) {

examples/realworld.svelte.dev/src/routes/editor/_Editor.svelte

@@ -1,8 +1,8 @@
 <script>
 	import { goto } from '$app/navigation';
 	import { session } from '$app/stores';
-	import ListErrors from '$components/ListErrors.svelte';
-	import * as api from '$common/api.js';
+	import ListErrors from '$lib/ListErrors.svelte';
+	import * as api from '$lib/api.js';
 
 	export let article;
 	export let slug;

examples/realworld.svelte.dev/src/routes/index.svelte

@@ -1,5 +1,5 @@
 <script>
-	import Home from '$components/Home.svelte';
+	import Home from '$lib/Home.svelte';
 </script>
 
 <Home p={1}/>

examples/realworld.svelte.dev/src/routes/login/index.svelte

@@ -9,8 +9,8 @@
 <script>
 	import { session } from '$app/stores';
 	import { goto } from '$app/navigation';
-	import { post } from '$common/utils.js';
-	import ListErrors from '$components/ListErrors.svelte';
+	import { post } from '$lib/utils.js';
+	import ListErrors from '$lib/ListErrors.svelte';
 
 	let email = '';
 	let password = '';

examples/realworld.svelte.dev/src/routes/profile/[user]/[view].svelte

@@ -1,5 +1,5 @@
 <script context="module">
-	import * as api from '$common/api.js';
+	import * as api from '$lib/api.js';
 
 	export async function load({ page, session: { user } }) {
 		const username = page.params.user.slice(1);

examples/realworld.svelte.dev/src/routes/profile/[user]/_Profile.svelte

@@ -1,7 +1,7 @@
 <script>
 	import { goto } from '$app/navigation';
-	import ArticleList from '$components/ArticleList/index.svelte';
-	import * as api from '$common/api.js';
+	import ArticleList from '$lib/ArticleList/index.svelte';
+	import * as api from '$lib/api.js';
 
 	export let profile;
 	export let favorites;

examples/realworld.svelte.dev/src/routes/profile/[user]/index.svelte

@@ -1,5 +1,5 @@
 <script context="module">
-	import * as api from '$common/api.js';
+	import * as api from '$lib/api.js';
 
 	export async function load({ page, session: { user } }) {
 		const username = page.params.user.slice(1);

examples/realworld.svelte.dev/src/routes/register/index.svelte

@@ -9,8 +9,8 @@
 <script>
 	import { session } from '$app/stores';
 	import { goto } from '$app/navigation';
-	import { post } from '$common/utils.js';
-	import ListErrors from '$components/ListErrors.svelte';
+	import { post } from '$lib/utils.js';
+	import ListErrors from '$lib/ListErrors.svelte';
 
 	let username = '';
 	let email = '';

examples/realworld.svelte.dev/src/routes/settings/index.svelte

@@ -8,9 +8,9 @@
 
 <script>
 	import { goto } from '$app/navigation';
-	import ListErrors from '$components/ListErrors.svelte';
+	import ListErrors from '$lib/ListErrors.svelte';
 	import SettingsForm from './_SettingsForm.svelte';
-	import { post } from '$common/utils.js';
+	import { post } from '$lib/utils.js';
 
 	let inProgress;
 	let errors;

examples/realworld.svelte.dev/vite.config.js

@@ -1,18 +1,12 @@
 // Consult https://vitejs.dev/config/ to learn about these options
-import { join, resolve } from 'path';
+import { join } from 'path';
 import { readFileSync } from 'fs';
 import { cwd } from 'process';
 
 const pkg = JSON.parse(readFileSync(join(cwd(), 'package.json')));
 
 /** @type {import('vite').UserConfig} */
 export default {
-	resolve: {
-		alias: {
-			$common: resolve('src/common'),
-			$components: resolve('src/components')
-		}
-	},
 	ssr: {
 		noExternal: Object.keys(pkg.dependencies || {})
 	}

examples/sandbox/src/routes/index.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <script>
-	import Counter from '$components/Counter.svelte';
+	import Counter from '$lib/Counter.svelte';
 
 	export let answer;
 

examples/sandbox/vite.config.js

@@ -1,5 +1,5 @@
 // Consult https://vitejs.dev/config/ to learn about these options
-import { join, resolve } from 'path';
+import { join } from 'path';
 import { readFileSync } from 'fs';
 import { cwd } from 'process';
 
@@ -10,11 +10,6 @@ export default {
 	build: {
 		minify: false
 	},
-	resolve: {
-		alias: {
-			$components: resolve('src/components')
-		}
-	},
 	ssr: {
 		noExternal: Object.keys(pkg.dependencies || {})
 	}

examples/svelte-kit-demo/src/routes/$layout.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <script>
-	import Nav from '$components/Nav.svelte';
+	import Nav from '$lib/Nav.svelte';
 	export let segment;
 </script>
 

examples/svelte-kit-demo/vite.config.js

@@ -1,17 +1,12 @@
 // Consult https://vitejs.dev/config/ to learn about these options
-import { join, resolve } from 'path';
+import { join } from 'path';
 import { readFileSync } from 'fs';
 import { cwd } from 'process';
 
 const pkg = JSON.parse(readFileSync(join(cwd(), 'package.json')));
 
 /** @type {import('vite').UserConfig} */
 export default {
-	resolve: {
-		alias: {
-			$components: resolve('src/components')
-		}
-	},
 	ssr: {
 		noExternal: Object.keys(pkg.dependencies || {})
 	}

packages/create-svelte/template/jsconfig.json

@@ -2,7 +2,7 @@
 	"compilerOptions": {
 		"paths": {
 			"$app/*": [".svelte/dev/runtime/app/*", ".svelte/build/runtime/app/*"],
-			"$components/*": ["src/components/*"]
+			"$lib/*": ["src/lib/*"]
 		}
 	},
 	"include": ["src/**/*.js", "src/**/*.svelte"]

packages/create-svelte/template/src/routes/index.svelte

@@ -1,5 +1,5 @@
 <script>
-	import Counter from '$components/Counter.svelte';
+	import Counter from '$lib/Counter.svelte';
 </script>
 
 <main>

packages/create-svelte/template/vite.config.js

@@ -1,17 +1,12 @@
 // Consult https://vitejs.dev/config/ to learn about these options
-import { join, resolve } from 'path';
+import { join } from 'path';
 import { readFileSync } from 'fs';
 import { cwd } from 'process';
 
 const pkg = JSON.parse(readFileSync(join(cwd(), 'package.json')));
 
 /** @type {import('vite').UserConfig} */
 export default {
-	resolve: {
-		alias: {
-			$components: resolve('src/components')
-		}
-	},
 	ssr: {
 		noExternal: Object.keys(pkg.dependencies || {})
 	}