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
sveltejs · Jul 7, 2023 · 06cf3cd · 06cf3cd
1 parent 486a971
commit 06cf3cd
Show file tree

Hide file tree

Showing 24 changed files with 141 additions and 56 deletions.
diff --git a/.changeset/famous-points-complain.md b/.changeset/famous-points-complain.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/package': minor
+---
+
+feat: use Svelte 4 typings when packaging if dependencies allow it
diff --git a/packages/package/package.json b/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",

diff --git a/packages/package/src/config.js b/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'));
+}
diff --git a/packages/package/src/typescript.js b/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)
 	});
 

diff --git a/packages/package/test/fixtures/javascript/expected/Test.svelte.d.ts b/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;

diff --git a/packages/package/test/fixtures/javascript/expected/Test2.svelte.d.ts b/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;

diff --git a/packages/package/test/fixtures/javascript/expected/internal/Test.svelte.d.ts b/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;

diff --git a/packages/package/test/fixtures/resolve-alias/expected/Test.svelte.d.ts b/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 {};
diff --git a/packages/package/test/fixtures/svelte-3-types/expected/Test.svelte b/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} />
diff --git a/packages/package/test/fixtures/svelte-3-types/expected/Test.svelte.d.ts b/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 {};
diff --git a/packages/package/test/fixtures/svelte-3-types/expected/index.d.ts b/packages/package/test/fixtures/svelte-3-types/expected/index.d.ts
@@ -0,0 +1 @@
+export { default as Test } from './Test.svelte';
diff --git a/packages/package/test/fixtures/svelte-3-types/expected/index.js b/packages/package/test/fixtures/svelte-3-types/expected/index.js
@@ -0,0 +1 @@
+export { default as Test } from './Test.svelte';
diff --git a/packages/package/test/fixtures/svelte-3-types/package.json b/packages/package/test/fixtures/svelte-3-types/package.json
@@ -0,0 +1,16 @@
+{
+	"name": "svelte-3-types",
+	"private": true,
+	"version": "1.0.0",
+	"description": "creates Svelte 3 backwards compatible types",
+	"type": "module",
+	"peerDependencies": {
+		"svelte": "^3.0.0 || ^4.0.0"
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	}
+}
diff --git a/packages/package/test/fixtures/svelte-3-types/src/lib/Test.svelte b/packages/package/test/fixtures/svelte-3-types/src/lib/Test.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	export const astring: string = 'potato';
+
+	const dispatch = createEventDispatcher<{ event: boolean }>();
+	dispatch('event', true);
+</script>
+
+<slot {astring} />
diff --git a/packages/package/test/fixtures/svelte-3-types/src/lib/index.ts b/packages/package/test/fixtures/svelte-3-types/src/lib/index.ts
@@ -0,0 +1 @@
+export { default as Test } from './Test.svelte';
diff --git a/packages/package/test/fixtures/svelte-3-types/svelte.config.js b/packages/package/test/fixtures/svelte-3-types/svelte.config.js
@@ -0,0 +1,7 @@
+import preprocess from 'svelte-preprocess';
+
+export default {
+	preprocess: preprocess({
+		preserve: ['ld+json']
+	})
+};
diff --git a/packages/package/test/fixtures/svelte-3-types/tsconfig.json b/packages/package/test/fixtures/svelte-3-types/tsconfig.json
@@ -0,0 +1,6 @@
+{
+	"compilerOptions": {
+		"target": "ESNext",
+		"module": "ESNext"
+	}
+}
diff --git a/packages/package/test/fixtures/svelte-kit/expected/Test.svelte.d.ts b/packages/package/test/fixtures/svelte-kit/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;

diff --git a/packages/package/test/fixtures/typescript/expected/Plain.svelte.d.ts b/packages/package/test/fixtures/typescript/expected/Plain.svelte.d.ts
@@ -1,7 +1,7 @@
 /** @typedef {typeof __propDef.props}  PlainProps */
 /** @typedef {typeof __propDef.events}  PlainEvents */
 /** @typedef {typeof __propDef.slots}  PlainSlots */
-export default class Plain extends SvelteComponentTyped<
+export default class Plain extends SvelteComponent<
 	{
 		foo: boolean;
 	},
@@ -13,7 +13,7 @@ export default class Plain extends SvelteComponentTyped<
 export type PlainProps = typeof __propDef.props;
 export type PlainEvents = typeof __propDef.events;
 export type PlainSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from 'svelte';
+import { SvelteComponent } from 'svelte';
 declare const __propDef: {
 	props: {
 		foo: import('./foo').Foo;

diff --git a/packages/package/test/fixtures/typescript/expected/Test.svelte.d.ts b/packages/package/test/fixtures/typescript/expected/Test.svelte.d.ts
@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from 'svelte';
+import { SvelteComponent } from 'svelte';
 declare const __propDef: {
 	props: {
 		astring?: string;
@@ -17,7 +17,7 @@ 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> {
 	get astring(): string;
 }
 export {};
diff --git a/packages/package/test/fixtures/typescript/expected/Test2.svelte.d.ts b/packages/package/test/fixtures/typescript/expected/Test2.svelte.d.ts
@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from 'svelte';
+import { SvelteComponent } from 'svelte';
 import type { Foo } from './foo';
 declare const __propDef: {
 	props: {
@@ -12,5 +12,5 @@ declare const __propDef: {
 export type Test2Props = typeof __propDef.props;
 export type Test2Events = typeof __propDef.events;
 export type Test2Slots = typeof __propDef.slots;
-export default class Test2 extends SvelteComponentTyped<Test2Props, Test2Events, Test2Slots> {}
+export default class Test2 extends SvelteComponent<Test2Props, Test2Events, Test2Slots> {}
 export {};
diff --git a/packages/package/test/index.js b/packages/package/test/index.js
@@ -135,6 +135,10 @@ test('create package with emitTypes settings disabled', async () => {
 	await test_make_package('emitTypes-false', { types: false });
 });
 
+test('create package with SvelteComponentTyped for backwards compatibility', async () => {
+	await test_make_package('svelte-3-types');
+});
+
 test('create package and resolves $lib alias', async () => {
 	await test_make_package('resolve-alias');
 });

diff --git a/packages/package/test/watch/expected/Test.svelte.d.ts b/packages/package/test/watch/expected/Test.svelte.d.ts
@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         answer: number;
@@ -11,6 +11,6 @@ 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 {};