feat: use Svelte 4 typings when packaging if dependencies allow it (#10328)

When the (peer)dependency states that only Svelte 4 is allowed, invoke the dts generation script with the Svelte 4 shims instead of the Svelte 3 shims. The noticable difference is that then SvelteComponent instead of the deprecated SvelteComponentTyped will be used to declare the component typings.
closes #10223

Author: dummdidumm

.changeset/famous-points-complain.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/package': minor
+---
+
+feat: use Svelte 4 typings when packaging if dependencies allow it

packages/package/package.json

@@ -14,10 +14,12 @@
 		"chokidar": "^3.5.3",
 		"kleur": "^4.1.5",
 		"sade": "^1.8.1",
-		"svelte2tsx": "~0.6.16"
+		"semver": "^7.5.3",
+		"svelte2tsx": "~0.6.19"
 	},
 	"devDependencies": {
 		"@types/node": "^16.18.6",
+		"@types/semver": "^7.5.0",
 		"svelte": "^4.0.3",
 		"svelte-preprocess": "^5.0.4",
 		"typescript": "^4.9.4",

packages/package/src/config.js

@@ -25,3 +25,17 @@ export async function load_config({ cwd = process.cwd() } = {}) {
 
 	return config;
 }
+
+/**
+ * @param {string} cwd
+ * @returns Record<string, any>
+ */
+export function load_pkg_json(cwd = process.cwd()) {
+	const pkg_json_file = path.join(cwd, 'package.json');
+
+	if (!fs.existsSync(pkg_json_file)) {
+		return {};
+	}
+
+	return JSON.parse(fs.readFileSync(pkg_json_file, 'utf-8'));
+}

packages/package/src/typescript.js

@@ -1,9 +1,11 @@
 import * as fs from 'node:fs';
 import * as path from 'node:path';
 import { createRequire } from 'node:module';
+import semver from 'semver';
 import { posixify, mkdirp, rimraf, walk } from './filesystem.js';
 import { resolve_aliases, write } from './utils.js';
 import { emitDts } from 'svelte2tsx';
+import { load_pkg_json } from './config.js';
 
 /**
  * Generates d.ts files by invoking TypeScript's "emit d.ts files from input files".
@@ -22,9 +24,14 @@ export async function emit_dts(input, output, cwd, alias, files) {
 	mkdirp(tmp);
 
 	const require = createRequire(import.meta.url);
+	const pkg = load_pkg_json(cwd);
+	const svelte_dep = pkg.peerDependencies?.svelte || pkg.dependencies?.svelte || '3.0';
+	const no_svelte_3 = !semver.intersects(svelte_dep, '^3.0.0');
 	await emitDts({
 		libRoot: input,
-		svelteShimsPath: require.resolve('svelte2tsx/svelte-shims.d.ts'),
+		svelteShimsPath: no_svelte_3
+			? require.resolve('svelte2tsx/svelte-shims-v4.d.ts')
+			: require.resolve('svelte2tsx/svelte-shims.d.ts'),
 		declarationDir: path.relative(cwd, tmp)
 	});
 

packages/package/test/fixtures/javascript/expected/Test.svelte.d.ts

@@ -1,7 +1,7 @@
 /** @typedef {typeof __propDef.props}  TestProps */
 /** @typedef {typeof __propDef.events}  TestEvents */
 /** @typedef {typeof __propDef.slots}  TestSlots */
-export default class Test extends SvelteComponentTyped<
+export default class Test extends SvelteComponent<
 	{
 		astring?: string;
 	},
@@ -21,7 +21,7 @@ export default class Test extends SvelteComponentTyped<
 export type TestProps = typeof __propDef.props;
 export type TestEvents = typeof __propDef.events;
 export type TestSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from 'svelte';
+import { SvelteComponent } from 'svelte';
 declare const __propDef: {
 	props: {
 		astring?: string;

packages/package/test/fixtures/javascript/expected/Test2.svelte.d.ts

@@ -1,7 +1,7 @@
 /** @typedef {typeof __propDef.props}  Test2Props */
 /** @typedef {typeof __propDef.events}  Test2Events */
 /** @typedef {typeof __propDef.slots}  Test2Slots */
-export default class Test2 extends SvelteComponentTyped<
+export default class Test2 extends SvelteComponent<
 	{
 		foo: boolean;
 	},
@@ -13,7 +13,7 @@ export default class Test2 extends SvelteComponentTyped<
 export type Test2Props = typeof __propDef.props;
 export type Test2Events = typeof __propDef.events;
 export type Test2Slots = typeof __propDef.slots;
-import { SvelteComponentTyped } from 'svelte';
+import { SvelteComponent } from 'svelte';
 declare const __propDef: {
 	props: {
 		foo: import('./foo').Foo;

packages/package/test/fixtures/javascript/expected/internal/Test.svelte.d.ts

@@ -1,7 +1,7 @@
 /** @typedef {typeof __propDef.props}  TestProps */
 /** @typedef {typeof __propDef.events}  TestEvents */
 /** @typedef {typeof __propDef.slots}  TestSlots */
-export default class Test extends SvelteComponentTyped<
+export default class Test extends SvelteComponent<
 	{
 		foo: boolean;
 	},
@@ -13,7 +13,7 @@ export default class Test extends SvelteComponentTyped<
 export type TestProps = typeof __propDef.props;
 export type TestEvents = typeof __propDef.events;
 export type TestSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from 'svelte';
+import { SvelteComponent } from 'svelte';
 declare const __propDef: {
 	props: {
 		foo: import('./foo').Foo;

packages/package/test/fixtures/resolve-alias/expected/Test.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from 'svelte';
+import { SvelteComponent } from 'svelte';
 declare const __propDef: {
 	props: {
 		bar?: import('./sub/foo').Foo;
@@ -11,5 +11,5 @@ declare const __propDef: {
 export type TestProps = typeof __propDef.props;
 export type TestEvents = typeof __propDef.events;
 export type TestSlots = typeof __propDef.slots;
-export default class Test extends SvelteComponentTyped<TestProps, TestEvents, TestSlots> {}
+export default class Test extends SvelteComponent<TestProps, TestEvents, TestSlots> {}
 export {};

packages/package/test/fixtures/svelte-3-types/expected/Test.svelte

@@ -0,0 +1,8 @@
+<script>
+import { createEventDispatcher } from 'svelte';
+export const astring = 'potato';
+const dispatch = createEventDispatcher();
+dispatch('event', true);
+</script>
+
+<slot {astring} />

packages/package/test/fixtures/svelte-3-types/expected/Test.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from 'svelte';
+declare const __propDef: {
+	props: {
+		astring?: string;
+	};
+	events: {
+		event: CustomEvent<boolean>;
+	} & {
+		[evt: string]: CustomEvent<any>;
+	};
+	slots: {
+		default: {
+			astring: string;
+		};
+	};
+};
+export type TestProps = typeof __propDef.props;
+export type TestEvents = typeof __propDef.events;
+export type TestSlots = typeof __propDef.slots;
+export default class Test extends SvelteComponentTyped<TestProps, TestEvents, TestSlots> {
+	get astring(): string;
+}
+export {};