Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 6 commits into from
Dec 19, 2024
Merged

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

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f5d853b
remove default function types for $props, $inspect, $bindable, and $host
ottomated Dec 19, 2024
3cc0245
changeset
ottomated Dec 19, 2024
aeda72d
regenerate types
ottomated Dec 19, 2024
29941f6
add helper message for type regeneration
ottomated Dec 19, 2024
69ab3ee
append a newline to generated types
ottomated Dec 19, 2024
8d85732
prettier
Rich-Harris Dec 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/three-suits-pay.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'svelte': patch
---

fix: Improve typescript DX for $inspect, $props, $bindable, and $host
2 changes: 1 addition & 1 deletion .github/workflows/ci.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/release.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 2 additions & 0 deletions packages/svelte/scripts/generate-types.js
View file
Open in desktop
Original file line number Diff 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
90 changes: 90 additions & 0 deletions packages/svelte/src/ambient.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*
Expand All @@ -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:
*
Expand Down Expand Up @@ -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;
}

/**
Expand All @@ -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;
}
92 changes: 91 additions & 1 deletion packages/svelte/types/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*
Expand All @@ -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:
*
Expand Down Expand Up @@ -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;
}

/**
Expand All @@ -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
Loading