[breaking] move packaging functionality into its own package (#5730)

* [breaking] move package command into separate package

* enhance create-svelte with libskeleton option

* remove package from kit

* update docs

* move shared code into internal package

* update workflow to build shared first

* please?

* remove cyclic dependency

* fixes

* fix

* @internal/shared is a no-go since we no longer bundle, unless we publish it to npm which feels like overkill

* remove bundling

* fix workflow

* goddammit vscode grow up. just add the extension. sheesh

* update tests

* pin vite version for now, to avoid distracting test failures

* fix

* add unused prepare script

Co-authored-by: Rich Harris <[email protected]>

Author: dummdidumm

.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/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/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"
+	}
+}