.changeset/chilled-years-smash.md

@@ -0,0 +1,5 @@
+---
+"create-svelte": patch
+---
+
+make variable names more descriptive

.changeset/nasty-shoes-mate.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+Prevent double import of env modules

.changeset/pre.json

@@ -30,7 +30,8 @@
     "prerendering-test-disabled": "0.0.2-next.0",
     "test-writes": "0.0.2-next.0",
     "svelte-migrate": "1.0.0-next.0",
-    "skeleton-template": "0.0.1-next.0"
+    "skeleton-template": "0.0.1-next.0",
+    "@sveltejs/package": "1.0.0-next.1"
   },
   "changesets": [
     "afraid-eels-tease",
@@ -122,6 +123,7 @@
     "chilled-moons-sniff",
     "chilled-rivers-talk",
     "chilled-starfishes-jog",
+    "chilled-years-smash",
     "chilled-zebras-check",
     "chilly-cars-battle",
     "chilly-files-greet",
@@ -574,6 +576,7 @@
     "nasty-llamas-lay",
     "nasty-seahorses-know",
     "nasty-seas-reflect",
+    "nasty-shoes-mate",
     "nasty-trees-cheer",
     "nasty-waves-kneel",
     "neat-cups-begin",
@@ -899,6 +902,7 @@
     "soft-months-fail",
     "soft-news-teach",
     "soft-students-cover",
+    "sour-cherries-play",
     "sour-hounds-punch",
     "sour-needles-compete",
     "sour-penguins-admire",

.changeset/sour-cherries-play.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+Tighten up params typings, fix load function typings, add event typings to generated types

.gitignore

@@ -5,7 +5,7 @@ test-results/
 package-lock.json
 yarn.lock
 /packages/create-svelte/template/CHANGELOG.md
-/packages/kit/src/packaging/test/watch/package
+/packages/package/test/**/package
 /documentation/types.js
 .env
 .vercel_build_output

.prettierrc

@@ -21,9 +21,9 @@
 			"files": [
 				"**/CHANGELOG.md",
 				"**/.svelte-kit/**",
-				"packages/kit/src/packaging/test/fixtures/**/expected/**/*",
-				"packages/kit/src/packaging/test/watch/expected/**/*",
-				"packages/kit/src/packaging/test/watch/package/**/*",
+				"packages/package/test/fixtures/**/expected/**/*",
+				"packages/package/test/watch/expected/**/*",
+				"packages/package/test/watch/package/**/*",
 				"packages/kit/src/core/prerender/fixtures/**/*",
 				"packages/migrate/migrations/routes/*/samples.md"
 			],

documentation/docs/13-packaging.md

@@ -2,18 +2,18 @@
 title: Packaging
 ---
 
-> `svelte-kit package` is currently experimental and is not subject to Semantic Versioning rules. Non-backward compatible changes may occur in any future release.
+> `svelte-package` is currently experimental. Non-backward compatible changes may occur in any future release.
 
-You can use SvelteKit to build component libraries as well as apps.
+You can use SvelteKit to build apps as well as component libraries, using the `@sveltejs/package` package (`npm create svelte` has an option to set this up for you).
 
 When you're creating an app, the contents of `src/routes` is the public-facing stuff; [`src/lib`](/docs/modules#$lib) contains your app's internal library.
 
 A SvelteKit component library has the exact same structure as a SvelteKit app, except that `src/lib` is the public-facing bit. `src/routes` might be a documentation or demo site that accompanies the library, or it might just be a sandbox you use during development.
 
-Running `svelte-kit package` will take the contents of `src/lib` and generate a `package` directory (which can be [configured](/docs/configuration#package)) containing the following:
+Running the `svelte-package` command from `@sveltejs/package` will take the contents of `src/lib` and generate a `package` directory (which can be [configured](/docs/configuration#package)) containing the following:
 
 - All the files in `src/lib`, unless you [configure](/docs/configuration#package) custom `include`/`exclude` options. Svelte components will be preprocessed, TypeScript files will be transpiled to JavaScript.
-- Type definitions (`d.ts` files) which are generated for Svelte, JavaScript and TypeScript files. You need to install `typescript >= 4.0.0` and `svelte2tsx >= 0.4.1` for this. Type definitions are placed next to their implementation, hand-written `d.ts` files are copied over as is. You can [disable generation](/docs/configuration#package), but we strongly recommend against it.
+- Type definitions (`d.ts` files) which are generated for Svelte, JavaScript and TypeScript files. You need to install `typescript >= 4.0.0` for this. Type definitions are placed next to their implementation, hand-written `d.ts` files are copied over as is. You can [disable generation](/docs/configuration#package), but we strongly recommend against it.
 - A `package.json` copied from the project root with all fields except `"scripts"`, `"publishConfig.directory"` and `"publishConfig.linkDirectory"`. The `"dependencies"` field is included, which means you should add packages that you only need for your documentation or demo site to `"devDependencies"`. A `"type": "module"` and an `"exports"` field will be added if it's not defined in the original file.
 
 The `"exports"` field contains the package's entry points. By default, all files in `src/lib` will be treated as an entry point unless they start with (or live in a directory that starts with) an underscore, but you can [configure](/docs/configuration#package) this behaviour. If you have a `src/lib/index.js` or `src/lib/index.svelte` file, it will be treated as the package root.
@@ -50,4 +50,6 @@ The `./package` above is referring to the directory name generated, change accor
 
 ### Caveats
 
+All relative file imports need to be fully specified, adhering to Node's ESM algorithm. This means you cannot import the file `src/lib/something/index.js` like `import { something } from './something`, instead you need to import it like this: `import { something } from './something/index.js`. If you are using TypeScript, you need to import `.ts` files the same way, but using a `.js` file ending, _not_ a `.ts` file ending (this isn't under our control, the TypeScript team has made that decision). Setting `"moduleResolution": "NodeNext"` in your `tsconfig.json` or `jsconfig.json` will help you with this.
+
 This is a relatively experimental feature and is not yet fully implemented. All files except Svelte files (preprocessed) and TypeScript files (transpiled to JavaScript) are copied across as-is.

documentation/docs/15-configuration.md

@@ -48,13 +48,6 @@ const config = {
 		},
 		moduleExtensions: ['.js', '.ts'],
 		outDir: '.svelte-kit',
-		package: {
-			dir: 'package',
-			emitTypes: true,
-			// excludes all .d.ts and files starting with _ as the name
-			exports: (filepath) => !/^_|\/_|\.d\.ts$/.test(filepath),
-			files: () => true
-		},
 		paths: {
 			assets: '',
 			base: ''
@@ -80,7 +73,17 @@ const config = {
 	},
 
 	// options passed to svelte.preprocess (https://svelte.dev/docs#compile-time-svelte-preprocess)
-	preprocess: null
+	preprocess: null,
+
+	// options passed to @sveltejs/package
+	package: {
+		source: 'value of kit.files.lib, if available, else src/lib',
+		dir: 'package',
+		emitTypes: true,
+		// excludes all .d.ts and files starting with _ as the name
+		exports: (filepath) => !/^_|\/_|\.d\.ts$/.test(filepath),
+		files: () => true
+	}
 };
 
 export default config;
@@ -208,8 +211,9 @@ The directory that SvelteKit writes files to during `dev` and `build`. You shoul
 
 Options related to [creating a package](/docs/packaging).
 
+- `source` - library directory
 - `dir` - output directory
-- `emitTypes` - by default, `svelte-kit package` will automatically generate types for your package in the form of `.d.ts` files. While generating types is configurable, we believe it is best for the ecosystem quality to generate types, always. Please make sure you have a good reason when setting it to `false` (for example when you want to provide handwritten type definitions instead)
+- `emitTypes` - by default, `svelte-package` will automatically generate types for your package in the form of `.d.ts` files. While generating types is configurable, we believe it is best for the ecosystem quality to generate types, always. Please make sure you have a good reason when setting it to `false` (for example when you want to provide handwritten type definitions instead)
 - `exports` - a function with the type of `(filepath: string) => boolean`. When `true`, the filepath will be included in the `exports` field of the `package.json`. Any existing values in the `package.json` source will be merged with values from the original `exports` field taking precedence
 - `files` - a function with the type of `(filepath: string) => boolean`. When `true`, the file will be processed and copied over to the final output folder, specified in `dir`
 
@@ -226,14 +230,12 @@ import mm from 'micromatch';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-	kit: {
-		package: {
-			exports: (filepath) => {
-				if (filepath.endsWith('.d.ts')) return false;
-				return mm.isMatch(filepath, ['!**/_*', '!**/internal/**']);
-			},
-			files: mm.matcher('!**/build.*')
-		}
+	package: {
+		exports: (filepath) => {
+			if (filepath.endsWith('.d.ts')) return false;
+			return mm.isMatch(filepath, ['!**/_*', '!**/internal/**']);
+		},
+		files: mm.matcher('!**/build.*')
 	}
 };
 

packages/adapter-static/package.json

@@ -32,6 +32,6 @@
 		"svelte": "^3.48.0",
 		"typescript": "^4.7.4",
 		"uvu": "^0.5.3",
-		"vite": "^3.0.0"
+		"vite": "3.0.2"
 	}
 }

packages/adapter-static/test/apps/prerendered/package.json

@@ -10,7 +10,7 @@
 	"devDependencies": {
 		"@sveltejs/kit": "workspace:*",
 		"svelte": "^3.48.0",
-		"vite": "^3.0.0"
+		"vite": "3.0.2"
 	},
 	"type": "module"
 }

packages/adapter-static/test/apps/spa/package.json

@@ -12,7 +12,7 @@
 		"@sveltejs/kit": "workspace:*",
 		"sirv-cli": "^2.0.2",
 		"svelte": "^3.48.0",
-		"vite": "^3.0.0"
+		"vite": "3.0.2"
 	},
 	"type": "module"
 }

packages/create-svelte/CHANGELOG.md

@@ -1,5 +1,11 @@
 # create-svelte
 
+## 2.0.0-next.155
+
+### Patch Changes
+
+- make variable names more descriptive ([#5983](https://github.com/sveltejs/kit/pull/5983))
+
 ## 2.0.0-next.154
 
 ### Patch Changes

packages/create-svelte/index.js

@@ -54,7 +54,7 @@ function write_common_files(cwd, options, name) {
 	const pkg_file = path.join(cwd, 'package.json');
 	const pkg = /** @type {any} */ (JSON.parse(fs.readFileSync(pkg_file, 'utf-8')));
 
-	files.forEach((file) => {
+	sort_files(files).forEach((file) => {
 		const include = file.include.every((condition) => matches_condition(condition, options));
 		const exclude = file.exclude.some((condition) => matches_condition(condition, options));
 
@@ -83,7 +83,7 @@ function write_common_files(cwd, options, name) {
  * @returns {boolean}
  */
 function matches_condition(condition, options) {
-	if (condition === 'default' || condition === 'skeleton') {
+	if (condition === 'default' || condition === 'skeleton' || condition === 'libskeleton') {
 		return options.template === condition;
 	}
 	if (condition === 'typescript' || condition === 'checkjs') {
@@ -135,6 +135,26 @@ function sort_keys(obj) {
 	return sorted;
 }
 
+/**
+ * Sort files so that those which apply more generically come first so they
+ * can be overwritten by files for more precise cases later.
+ *
+ * @param files {import('./types/internal').Common['files']}
+ *  */
+function sort_files(files) {
+	return files.sort((f1, f2) => {
+		const f1_more_generic =
+			f1.include.every((include) => f2.include.includes(include)) &&
+			f1.exclude.every((exclude) => f2.exclude.includes(exclude));
+		const f2_more_generic =
+			f2.include.every((include) => f1.include.includes(include)) &&
+			f2.exclude.every((exclude) => f1.exclude.includes(exclude));
+		const same = f1_more_generic && f2_more_generic;
+		const different = !f1_more_generic && !f2_more_generic;
+		return same || different ? 0 : f1_more_generic ? -1 : 1;
+	});
+}
+
 /** @param {string} name */
 function to_valid_package_name(name) {
 	return name

packages/create-svelte/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "create-svelte",
-	"version": "2.0.0-next.154",
+	"version": "2.0.0-next.155",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/sveltejs/kit",

packages/create-svelte/shared/+libskeleton+checkjs/jsconfig.json

@@ -0,0 +1,14 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "NodeNext"
+	}
+}

packages/create-svelte/shared/+libskeleton+typescript/tsconfig.json

@@ -0,0 +1,14 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "NodeNext"
+	}
+}

packages/create-svelte/templates/default/package.json

@@ -5,7 +5,6 @@
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
-		"package": "svelte-kit package",
 		"preview": "vite preview"
 	},
 	"devDependencies": {

packages/create-svelte/templates/default/src/lib/form.ts

@@ -60,11 +60,11 @@ export function enhance(
 ) {
 	let current_token: unknown;
 
-	/** @param {SubmitEvent} e */
-	async function handle_submit(e: SubmitEvent) {
+	/** @param {SubmitEvent} event */
+	async function handle_submit(event: SubmitEvent) {
 		const token = (current_token = {});
 
-		e.preventDefault();
+		event.preventDefault();
 
 		const data = new FormData(form);
 
@@ -92,11 +92,11 @@ export function enhance(
 			} else {
 				console.error(await response.text());
 			}
-		} catch (e: unknown) {
-			if (error && e instanceof Error) {
-				error({ data, form, error: e, response: null });
+		} catch (err: unknown) {
+			if (error && err instanceof Error) {
+				error({ data, form, error: err, response: null });
 			} else {
-				throw e;
+				throw err;
 			}
 		}
 	}

packages/create-svelte/templates/libskeleton/.gitignore

@@ -0,0 +1,8 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example

packages/create-svelte/templates/libskeleton/.ignore

@@ -0,0 +1,3 @@
+package.json
+.meta.json
+.turbo

packages/create-svelte/templates/libskeleton/.meta.json

@@ -0,0 +1,4 @@
+{
+	"title": "Library skeleton project",
+	"description": "Barebones scaffolding for your new Svelte library"
+}

packages/create-svelte/templates/libskeleton/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

packages/create-svelte/templates/libskeleton/package.template.json

@@ -0,0 +1,18 @@
+{
+	"name": "~TODO~",
+	"version": "0.0.1",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "svelte-kit sync && svelte-package"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "workspace:*",
+		"@sveltejs/kit": "workspace:*",
+		"@sveltejs/package": "workspace:*",
+		"svelte": "^3.44.0",
+		"tslib": "^2.3.1",
+		"typescript": "^4.7.4",
+		"vite": "^3.0.0"
+	},
+	"type": "module"
+}

packages/create-svelte/templates/libskeleton/src/app.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="@sveltejs/kit" />
+
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+// and what to do when importing types
+declare namespace App {
+	// interface Locals {}
+	// interface Platform {}
+	// interface Session {}
+	// interface Stuff {}
+}

packages/create-svelte/templates/libskeleton/src/app.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body>
+		<div>%sveltekit.body%</div>
+	</body>
+</html>

packages/create-svelte/templates/libskeleton/src/lib/index.js

@@ -0,0 +1 @@
+// Reexport your entry components here

packages/create-svelte/templates/libskeleton/src/routes/+page.svelte

@@ -0,0 +1,3 @@
+<h1>Welcome to your library project</h1>
+<p>Create your package using @sveltejs/package and preview/showcase your work with SvelteKit</p>
+<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>