svelte icon indicating copy to clipboard operation
svelte copied to clipboard

Declare type for the options parameter of the mount() function on its own

Open webJose opened this issue 1 year ago • 5 comments

Describe the problem

For declaring ambient modules and even regular types for code that uses mount() and would like to type things, the type for the options parameter is not named, and instead is defined inline:

 * @param {{} extends Props ? {
 * 		target: Document | Element | ShadowRoot;
 * 		anchor?: Node;
 * 		props?: Props;
 * 		events?: Record<string, (e: any) => any>;
 * 		context?: Map<any, any>;
 * 		intro?: boolean;
 * 	}: {
 * 		target: Document | Element | ShadowRoot;
 * 		props: Props;
 * 		anchor?: Node;
 * 		events?: Record<string, (e: any) => any>;
 * 		context?: Map<any, any>;
 * 		intro?: boolean;
 * 	}} options

Describe the proposed solution

Declare the options parameter's type as its own type:

 export type MountOptions<Props extends Record<string, any> = Record<string, any>> = {} extends Props ? {
 		target: Document | Element | ShadowRoot;
 		anchor?: Node;
 		props?: Props;
 		events?: Record<string, (e: any) => any>;
 		context?: Map<any, any>;
 		intro?: boolean;
 	}: {
 		target: Document | Element | ShadowRoot;
 		props: Props;
 		anchor?: Node;
 		events?: Record<string, (e: any) => any>;
 		context?: Map<any, any>;
 		intro?: boolean;
 	}

BTW, now that I see the type, maybe the following is more succinct?

export type MountOptions<Props extends Record<string, any> = Record<string, any>> = {
  target: Document | Element | ShadowRoot;
  anchor?: Node;
  events?: Record<string, (e: any) => any>;
  context?: Map<any, any>;
  intro?: boolean;
} & {} extends Props ? {
  props?: Props;
} : {
  props: Props;
}

Importance

nice to have

webJose avatar Oct 17 '24 20:10 webJose

Sounds like you're half way there towards making a PR :P

trueadm avatar Oct 18 '24 01:10 trueadm

I would but I don't know JsDoc enough. I quickly gave it a shot. I defined the type in packages/svelte/types/index.d.ts, but the type needs importing in packages/svelte/src/internal/client/render.js. This is where I don't know: I see zero imports from the file I modified, and to my surprise there's an index.d.ts file in src. So I'm at a loss here. If you can guide me through this, I'll complete the PR.

webJose avatar Oct 18 '24 14:10 webJose

Can you create a draft PR with what you already have?

brunnerh avatar Oct 18 '24 14:10 brunnerh

Import option examples:

// These give you the `Snippet` to use elsewhere:
/** @import { Snippet } from 'svelte'; */
/** @typedef {import('svelte').Snippet} Snippet */

/**
 * Or inline import:
 * @param {import('svelte').Snippet} arg
 */
function fun(arg) { /* ... */ }

brunnerh avatar Oct 18 '24 14:10 brunnerh

Here's the PR: https://github.com/sveltejs/svelte/pull/13674

webJose avatar Oct 18 '24 14:10 webJose