implement $lib

.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 || {})
  }