fix: intellisense DX for $props, $inspect, $bindable, and $host (#14777)

* remove default function types for $props, $inspect, $bindable, and $host * changeset * regenerate types * add helper message for type regeneration * append a newline to generated types * prettier --------- Co-authored-by: Rich Harris <[email protected]>
sveltejs · Dec 19, 2024 · 999b92d · 999b92d
1 parent 5bc4033
commit 999b92d
Show file tree

Hide file tree

Showing 6 changed files with 190 additions and 3 deletions.
diff --git a/.changeset/three-suits-pay.md b/.changeset/three-suits-pay.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: Improve typescript DX for $inspect, $props, $bindable, and $host
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -59,7 +59,7 @@ jobs:
         run: pnpm lint
       - name: build and check generated types
         if: (${{ success() }} || ${{ failure() }}) # ensures this step runs even if previous steps fail
-        run: pnpm build && { [ "`git status --porcelain=v1`" == "" ] || (echo "Generated types have changed — please regenerate types locally and commit the changes after you have reviewed them"; git diff; exit 1); }
+        run: pnpm build && { [ "`git status --porcelain=v1`" == "" ] || (echo "Generated types have changed — please regenerate types locally with `cd packages/svelte && pnpm generate:types` and commit the changes after you have reviewed them"; git diff; exit 1); }
   Benchmarks:
     runs-on: ubuntu-latest
     timeout-minutes: 15

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -33,7 +33,7 @@ jobs:
         run: pnpm install --frozen-lockfile
 
       - name: Build
-        run: pnpm build && { [ "`git status --porcelain=v1`" == "" ] || (echo "Generated types have changed — please regenerate types locally and commit the changes after you have reviewed them"; git diff; exit 1); }
+        run: pnpm build && { [ "`git status --porcelain=v1`" == "" ] || (echo "Generated types have changed — please regenerate types locally with `cd packages/svelte && pnpm generate:types` and commit the changes after you have reviewed them"; git diff; exit 1); }
 
       - name: Create Release Pull Request or Publish to npm
         id: changesets

diff --git a/packages/svelte/scripts/generate-types.js b/packages/svelte/scripts/generate-types.js
@@ -46,6 +46,8 @@ await createBundle({
 	}
 });
 
+fs.appendFileSync(`${dir}/types/index.d.ts`, '\n');
+
 const types = fs.readFileSync(`${dir}/types/index.d.ts`, 'utf-8');
 
 const bad_links = [...types.matchAll(/\]\((\/[^)]+)\)/g)];

diff --git a/packages/svelte/src/ambient.d.ts b/packages/svelte/src/ambient.d.ts
@@ -338,6 +338,29 @@ declare namespace $effect {
  */
 declare function $props(): any;
 
+declare namespace $props {
+	// prevent intellisense from being unhelpful
+	/** @deprecated */
+	export const apply: never;
+	/** @deprecated */
+	// @ts-ignore
+	export const arguments: never;
+	/** @deprecated */
+	export const bind: never;
+	/** @deprecated */
+	export const call: never;
+	/** @deprecated */
+	export const caller: never;
+	/** @deprecated */
+	export const length: never;
+	/** @deprecated */
+	export const name: never;
+	/** @deprecated */
+	export const prototype: never;
+	/** @deprecated */
+	export const toString: never;
+}
+
 /**
  * Declares a prop as bindable, meaning the parent component can use `bind:propName={value}` to bind to it.
  *
@@ -349,6 +372,29 @@ declare function $props(): any;
  */
 declare function $bindable<T>(fallback?: T): T;
 
+declare namespace $bindable {
+	// prevent intellisense from being unhelpful
+	/** @deprecated */
+	export const apply: never;
+	/** @deprecated */
+	// @ts-ignore
+	export const arguments: never;
+	/** @deprecated */
+	export const bind: never;
+	/** @deprecated */
+	export const call: never;
+	/** @deprecated */
+	export const caller: never;
+	/** @deprecated */
+	export const length: never;
+	/** @deprecated */
+	export const name: never;
+	/** @deprecated */
+	export const prototype: never;
+	/** @deprecated */
+	export const toString: never;
+}
+
 /**
  * Inspects one or more values whenever they, or the properties they contain, change. Example:
  *
@@ -388,6 +434,27 @@ declare namespace $inspect {
 	 * </script>
 	 */
 	export function trace(name: string): void;
+
+	// prevent intellisense from being unhelpful
+	/** @deprecated */
+	export const apply: never;
+	/** @deprecated */
+	// @ts-ignore
+	export const arguments: never;
+	/** @deprecated */
+	export const bind: never;
+	/** @deprecated */
+	export const call: never;
+	/** @deprecated */
+	export const caller: never;
+	/** @deprecated */
+	export const length: never;
+	/** @deprecated */
+	export const name: never;
+	/** @deprecated */
+	export const prototype: never;
+	/** @deprecated */
+	export const toString: never;
 }
 
 /**
@@ -410,3 +477,26 @@ declare namespace $inspect {
  * https://svelte.dev/docs/svelte/$host
  */
 declare function $host<El extends HTMLElement = HTMLElement>(): El;
+
+declare namespace $host {
+	// prevent intellisense from being unhelpful
+	/** @deprecated */
+	export const apply: never;
+	/** @deprecated */
+	// @ts-ignore
+	export const arguments: never;
+	/** @deprecated */
+	export const bind: never;
+	/** @deprecated */
+	export const call: never;
+	/** @deprecated */
+	export const caller: never;
+	/** @deprecated */
+	export const length: never;
+	/** @deprecated */
+	export const name: never;
+	/** @deprecated */
+	export const prototype: never;
+	/** @deprecated */
+	export const toString: never;
+}
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
@@ -2996,6 +2996,29 @@ declare namespace $effect {
  */
 declare function $props(): any;
 
+declare namespace $props {
+	// prevent intellisense from being unhelpful
+	/** @deprecated */
+	export const apply: never;
+	/** @deprecated */
+	// @ts-ignore
+	export const arguments: never;
+	/** @deprecated */
+	export const bind: never;
+	/** @deprecated */
+	export const call: never;
+	/** @deprecated */
+	export const caller: never;
+	/** @deprecated */
+	export const length: never;
+	/** @deprecated */
+	export const name: never;
+	/** @deprecated */
+	export const prototype: never;
+	/** @deprecated */
+	export const toString: never;
+}
+
 /**
  * Declares a prop as bindable, meaning the parent component can use `bind:propName={value}` to bind to it.
  *
@@ -3007,6 +3030,29 @@ declare function $props(): any;
  */
 declare function $bindable<T>(fallback?: T): T;
 
+declare namespace $bindable {
+	// prevent intellisense from being unhelpful
+	/** @deprecated */
+	export const apply: never;
+	/** @deprecated */
+	// @ts-ignore
+	export const arguments: never;
+	/** @deprecated */
+	export const bind: never;
+	/** @deprecated */
+	export const call: never;
+	/** @deprecated */
+	export const caller: never;
+	/** @deprecated */
+	export const length: never;
+	/** @deprecated */
+	export const name: never;
+	/** @deprecated */
+	export const prototype: never;
+	/** @deprecated */
+	export const toString: never;
+}
+
 /**
  * Inspects one or more values whenever they, or the properties they contain, change. Example:
  *
@@ -3046,6 +3092,27 @@ declare namespace $inspect {
 	 * </script>
 	 */
 	export function trace(name: string): void;
+
+	// prevent intellisense from being unhelpful
+	/** @deprecated */
+	export const apply: never;
+	/** @deprecated */
+	// @ts-ignore
+	export const arguments: never;
+	/** @deprecated */
+	export const bind: never;
+	/** @deprecated */
+	export const call: never;
+	/** @deprecated */
+	export const caller: never;
+	/** @deprecated */
+	export const length: never;
+	/** @deprecated */
+	export const name: never;
+	/** @deprecated */
+	export const prototype: never;
+	/** @deprecated */
+	export const toString: never;
 }
 
 /**
@@ -3069,4 +3136,27 @@ declare namespace $inspect {
  */
 declare function $host<El extends HTMLElement = HTMLElement>(): El;
 
-//# sourceMappingURL=index.d.ts.map
+declare namespace $host {
+	// prevent intellisense from being unhelpful
+	/** @deprecated */
+	export const apply: never;
+	/** @deprecated */
+	// @ts-ignore
+	export const arguments: never;
+	/** @deprecated */
+	export const bind: never;
+	/** @deprecated */
+	export const call: never;
+	/** @deprecated */
+	export const caller: never;
+	/** @deprecated */
+	export const length: never;
+	/** @deprecated */
+	export const name: never;
+	/** @deprecated */
+	export const prototype: never;
+	/** @deprecated */
+	export const toString: never;
+}
+
+//# sourceMappingURL=index.d.ts.map
-Original file line number
+Diff line change
@@ Expand Up / @@ -46,6 +46,8 @@ await createBundle({ @@
     	}
     });
+    fs.appendFileSync(`${dir}/types/index.d.ts`, '\n');
     const types = fs.readFileSync(`${dir}/types/index.d.ts`, 'utf-8');
     const bad_links = [...types.matchAll(/\]\((\/[^)]+)\)/g)];
@@ Expand Down @@