diff --git a/.changeset/great-kangaroos-eat.md b/.changeset/great-kangaroos-eat.md new file mode 100644 index 000000000000..c65d7c2e5239 --- /dev/null +++ b/.changeset/great-kangaroos-eat.md @@ -0,0 +1,6 @@ +--- +'create-svelte': patch +'@sveltejs/kit': patch +--- + +Add \$lib alias diff --git a/documentation/migrating/01-migrating.md b/documentation/migrating/01-migrating.md index 83464516007f..e9a4d1b8047c 100644 --- a/documentation/migrating/01-migrating.md +++ b/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 `
` (or `id` matching `target` in `svelte.config.cjs`) + - It should have a `
` (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` diff --git a/examples/hn.svelte.dev/src/components/Nav.svelte b/examples/hn.svelte.dev/src/lib/Nav.svelte similarity index 100% rename from examples/hn.svelte.dev/src/components/Nav.svelte rename to examples/hn.svelte.dev/src/lib/Nav.svelte diff --git a/examples/hn.svelte.dev/src/components/PreloadingIndicator.svelte b/examples/hn.svelte.dev/src/lib/PreloadingIndicator.svelte similarity index 100% rename from examples/hn.svelte.dev/src/components/PreloadingIndicator.svelte rename to examples/hn.svelte.dev/src/lib/PreloadingIndicator.svelte diff --git a/examples/hn.svelte.dev/src/components/ThemeToggler.svelte b/examples/hn.svelte.dev/src/lib/ThemeToggler.svelte similarity index 100% rename from examples/hn.svelte.dev/src/components/ThemeToggler.svelte rename to examples/hn.svelte.dev/src/lib/ThemeToggler.svelte diff --git a/examples/hn.svelte.dev/src/routes/$layout.svelte b/examples/hn.svelte.dev/src/routes/$layout.svelte index 5ae365ade32a..b40ba04da1aa 100644 --- a/examples/hn.svelte.dev/src/routes/$layout.svelte +++ b/examples/hn.svelte.dev/src/routes/$layout.svelte @@ -4,9 +4,9 @@ diff --git a/examples/hn.svelte.dev/tsconfig.json b/examples/hn.svelte.dev/tsconfig.json index 68b00d5714d3..7362a3b82462 100644 --- a/examples/hn.svelte.dev/tsconfig.json +++ b/examples/hn.svelte.dev/tsconfig.json @@ -2,7 +2,7 @@ "compilerOptions": { "baseUrl": ".", "paths": { - "$components/*": ["./src/components/*"] + "$lib/*": ["./src/lib/*"] } } } diff --git a/examples/hn.svelte.dev/vite.config.js b/examples/hn.svelte.dev/vite.config.js index 499379c8130d..c466de9ae4a6 100644 --- a/examples/hn.svelte.dev/vite.config.js +++ b/examples/hn.svelte.dev/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'; @@ -7,11 +7,6 @@ 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 || {}) } diff --git a/examples/realworld.svelte.dev/src/components/ArticleList/ArticlePreview.svelte b/examples/realworld.svelte.dev/src/lib/ArticleList/ArticlePreview.svelte similarity index 97% rename from examples/realworld.svelte.dev/src/components/ArticleList/ArticlePreview.svelte rename to examples/realworld.svelte.dev/src/lib/ArticleList/ArticlePreview.svelte index e89a79bc8ce4..ddc6b5bf5c4c 100644 --- a/examples/realworld.svelte.dev/src/components/ArticleList/ArticlePreview.svelte +++ b/examples/realworld.svelte.dev/src/lib/ArticleList/ArticlePreview.svelte @@ -1,5 +1,5 @@ diff --git a/examples/realworld.svelte.dev/src/routes/[p].svelte b/examples/realworld.svelte.dev/src/routes/[p].svelte index 77b2157dac8e..045543c573a2 100644 --- a/examples/realworld.svelte.dev/src/routes/[p].svelte +++ b/examples/realworld.svelte.dev/src/routes/[p].svelte @@ -1,6 +1,6 @@ \ No newline at end of file diff --git a/examples/realworld.svelte.dev/src/routes/article/[slug].svelte b/examples/realworld.svelte.dev/src/routes/article/[slug].svelte index 967d40cb44b5..5f3d3b0864c8 100644 --- a/examples/realworld.svelte.dev/src/routes/article/[slug].svelte +++ b/examples/realworld.svelte.dev/src/routes/article/[slug].svelte @@ -1,5 +1,5 @@ \ No newline at end of file diff --git a/examples/realworld.svelte.dev/src/routes/login/index.svelte b/examples/realworld.svelte.dev/src/routes/login/index.svelte index 3f0544500fb0..c04ab2819922 100644 --- a/examples/realworld.svelte.dev/src/routes/login/index.svelte +++ b/examples/realworld.svelte.dev/src/routes/login/index.svelte @@ -9,8 +9,8 @@ diff --git a/examples/svelte-kit-demo/vite.config.js b/examples/svelte-kit-demo/vite.config.js index 499379c8130d..c466de9ae4a6 100644 --- a/examples/svelte-kit-demo/vite.config.js +++ b/examples/svelte-kit-demo/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'; @@ -7,11 +7,6 @@ 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 || {}) } diff --git a/packages/create-svelte/template/jsconfig.json b/packages/create-svelte/template/jsconfig.json index 63baaaadd0d4..e5f26af2a360 100644 --- a/packages/create-svelte/template/jsconfig.json +++ b/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"] diff --git a/packages/create-svelte/template/src/routes/index.svelte b/packages/create-svelte/template/src/routes/index.svelte index de877f03844f..919b8c78a0b0 100644 --- a/packages/create-svelte/template/src/routes/index.svelte +++ b/packages/create-svelte/template/src/routes/index.svelte @@ -1,5 +1,5 @@
diff --git a/packages/create-svelte/template/vite.config.js b/packages/create-svelte/template/vite.config.js index 499379c8130d..c466de9ae4a6 100644 --- a/packages/create-svelte/template/vite.config.js +++ b/packages/create-svelte/template/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'; @@ -7,11 +7,6 @@ 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 || {}) } diff --git a/packages/kit/src/cli.js b/packages/kit/src/cli.js index 6b4cb1e98744..2a3ba035163d 100644 --- a/packages/kit/src/cli.js +++ b/packages/kit/src/cli.js @@ -13,15 +13,20 @@ async function get_config() { // prettier-ignore console.error(` - import { resolve } from 'path'; + // Consult https://vitejs.dev/config/ to learn about these options + 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 || {}) } }; + `.replace(/^\t{3}/gm, '').replace(/\t/gm, ' ').trim()); } diff --git a/packages/kit/src/core/build/index.js b/packages/kit/src/core/build/index.js index 401d815962c0..23119346a816 100644 --- a/packages/kit/src/core/build/index.js +++ b/packages/kit/src/core/build/index.js @@ -137,7 +137,8 @@ async function build_client({ }, resolve: { alias: { - $app: path.resolve(`${build_dir}/runtime/app`) + $app: path.resolve(`${build_dir}/runtime/app`), + $lib: config.kit.files.lib } }, plugins: [ @@ -378,7 +379,8 @@ async function build_server( }, resolve: { alias: { - $app: path.resolve(`${build_dir}/runtime/app`) + $app: path.resolve(`${build_dir}/runtime/app`), + $lib: config.kit.files.lib } }, plugins: [ diff --git a/packages/kit/src/core/dev/index.js b/packages/kit/src/core/dev/index.js index e0ed9601f318..f6c9dae40b6e 100644 --- a/packages/kit/src/core/dev/index.js +++ b/packages/kit/src/core/dev/index.js @@ -79,7 +79,8 @@ class Watcher extends EventEmitter { root: this.cwd, resolve: { alias: { - $app: path.resolve(`${this.dir}/runtime/app`) + $app: path.resolve(`${this.dir}/runtime/app`), + $lib: this.config.kit.files.lib } }, plugins: [ diff --git a/packages/kit/src/core/load_config/index.js b/packages/kit/src/core/load_config/index.js index 86900518f377..bcbab2e0eb46 100644 --- a/packages/kit/src/core/load_config/index.js +++ b/packages/kit/src/core/load_config/index.js @@ -85,6 +85,7 @@ export async function load_config({ cwd = process.cwd() } = {}) { const validated = validate_config(config.default); validated.kit.files.assets = path.resolve(cwd, validated.kit.files.assets); + validated.kit.files.lib = path.resolve(cwd, validated.kit.files.lib); validated.kit.files.routes = path.resolve(cwd, validated.kit.files.routes); validated.kit.files.serviceWorker = path.resolve(cwd, validated.kit.files.serviceWorker); validated.kit.files.setup = path.resolve(cwd, validated.kit.files.setup); diff --git a/packages/kit/src/core/load_config/index.spec.js b/packages/kit/src/core/load_config/index.spec.js index 0ee6f4597749..ad22bda299ea 100644 --- a/packages/kit/src/core/load_config/index.spec.js +++ b/packages/kit/src/core/load_config/index.spec.js @@ -14,6 +14,7 @@ test('fills in defaults', () => { appDir: '_app', files: { assets: 'static', + lib: 'src/lib', routes: 'src/routes', serviceWorker: 'src/service-worker', setup: 'src/setup', @@ -86,6 +87,7 @@ test('fills in partial blanks', () => { appDir: '_app', files: { assets: 'public', + lib: 'src/lib', routes: 'src/routes', serviceWorker: 'src/service-worker', setup: 'src/setup', diff --git a/packages/kit/src/core/load_config/options.js b/packages/kit/src/core/load_config/options.js index ee1a538c779c..f4c438f844fe 100644 --- a/packages/kit/src/core/load_config/options.js +++ b/packages/kit/src/core/load_config/options.js @@ -59,6 +59,7 @@ const options = { type: 'branch', children: { assets: expect_string('static'), + lib: expect_string('src/lib'), routes: expect_string('src/routes'), serviceWorker: expect_string('src/service-worker'), setup: expect_string('src/setup'), diff --git a/packages/kit/src/core/load_config/test/index.js b/packages/kit/src/core/load_config/test/index.js index 91f205b2e989..a038c06601e5 100644 --- a/packages/kit/src/core/load_config/test/index.js +++ b/packages/kit/src/core/load_config/test/index.js @@ -23,6 +23,7 @@ suite('load default config', async () => { appDir: '_app', files: { assets: join(cwd, 'static'), + lib: join(cwd, 'src/lib'), routes: join(cwd, 'src/routes'), serviceWorker: join(cwd, 'src/service-worker'), setup: join(cwd, 'src/setup'), diff --git a/packages/kit/src/types.d.ts b/packages/kit/src/types.d.ts index 075cd97f2358..029911621641 100644 --- a/packages/kit/src/types.d.ts +++ b/packages/kit/src/types.d.ts @@ -22,6 +22,7 @@ export type ValidatedConfig = { appDir: string; files: { assets: string; + lib: string; routes: string; serviceWorker: string; setup: string; diff --git a/packages/kit/test/apps/amp/vite.config.js b/packages/kit/test/apps/amp/vite.config.js deleted file mode 100644 index 4c52b8079c75..000000000000 --- a/packages/kit/test/apps/amp/vite.config.js +++ /dev/null @@ -1,9 +0,0 @@ -import { resolve } from 'path'; - -export default { - resolve: { - alias: { - $components: resolve('src/components') - } - } -}; diff --git a/packages/kit/test/apps/basics/vite.config.js b/packages/kit/test/apps/basics/vite.config.js index 33efbcf77c37..6c565e6d3016 100644 --- a/packages/kit/test/apps/basics/vite.config.js +++ b/packages/kit/test/apps/basics/vite.config.js @@ -1,13 +1,6 @@ -import { resolve } from 'path'; - export default { build: { minify: false }, - resolve: { - alias: { - $components: resolve('src/components') - } - }, clearScreen: false }; diff --git a/packages/kit/test/apps/options/source/pages/index.svelte b/packages/kit/test/apps/options/source/pages/index.svelte index 918ab0ceddaf..e1d2caf93066 100644 --- a/packages/kit/test/apps/options/source/pages/index.svelte +++ b/packages/kit/test/apps/options/source/pages/index.svelte @@ -1,5 +1,5 @@

We're on index.svelte

diff --git a/packages/kit/test/apps/options/svelte.config.cjs b/packages/kit/test/apps/options/svelte.config.cjs index c48a8babfe2e..07d5a092d000 100644 --- a/packages/kit/test/apps/options/svelte.config.cjs +++ b/packages/kit/test/apps/options/svelte.config.cjs @@ -5,6 +5,7 @@ module.exports = { files: { assets: 'public', + lib: 'source/components', routes: 'source/pages', template: 'source/template.html' }, diff --git a/packages/kit/test/apps/options/vite.config.js b/packages/kit/test/apps/options/vite.config.js index 31d1948d6b89..6c565e6d3016 100644 --- a/packages/kit/test/apps/options/vite.config.js +++ b/packages/kit/test/apps/options/vite.config.js @@ -1,13 +1,6 @@ -import { fileURLToPath } from 'url'; - export default { build: { minify: false }, - resolve: { - alias: { - $components: fileURLToPath(new URL('source/components', import.meta.url)) - } - }, clearScreen: false }; diff --git a/packages/kit/types.d.ts b/packages/kit/types.d.ts index aa89ea96a2ce..3e9618a5ecf2 100644 --- a/packages/kit/types.d.ts +++ b/packages/kit/types.d.ts @@ -7,6 +7,7 @@ export type Config = { appDir?: string; files?: { assets?: string; + lib?: string; routes?: string; serviceWorker?: string; setup?: string;