From d34a27b9fdf73b0fe2f29aa37272f29bba2eba66 Mon Sep 17 00:00:00 2001 From: firefish5000 <1813610+firefish5000@users.noreply.github.com> Date: Mon, 23 Nov 2020 17:39:28 -0600 Subject: [PATCH 1/3] Fix default export return type --- packages/svelte2tsx/src/svelte2tsx/index.ts | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/svelte2tsx/src/svelte2tsx/index.ts b/packages/svelte2tsx/src/svelte2tsx/index.ts index 15692faaf..6e4cf1153 100644 --- a/packages/svelte2tsx/src/svelte2tsx/index.ts +++ b/packages/svelte2tsx/src/svelte2tsx/index.ts @@ -281,16 +281,17 @@ function addComponentExport({ fileName, componentDocumentation }: AddComponentExportPara) { - const eventsDef = strictEvents ? 'render' : '__sveltets_with_any_event(render)'; + // FIXME: Does this make sense? Are we supposed to be able to listen to events our component does not emit? + const eventsDef = "ReturnType['events']" + (strictEvents ? '' : ' & Record>'); const propDef = // Omit partial-wrapper only if both strict mode and ts file, because // in a js file the user has no way of telling the language that // the prop is optional - strictMode && isTsFile - ? uses$$propsOr$$restProps - ? `__sveltets_with_any(${eventsDef})` - : eventsDef - : `__sveltets_partial${uses$$propsOr$$restProps ? '_with_any' : ''}(${eventsDef})`; + (strictMode && isTsFile + ? "ReturnType['props']" + : "Partial['props']>") + + (uses$$propsOr$$restProps ? ' & Record' : ''); + const slotDef = "ReturnType['slots']"; const doc = componentDocumentation.getFormatted(); const className = fileName && classNameFromFilename(fileName); @@ -298,7 +299,7 @@ function addComponentExport({ const statement = `\n\n${doc}export default class${ className ? ` ${className}` : '' - } extends createSvelte2TsxComponent(${propDef}) {` + + } extends Svelte2TsxComponent<${propDef},${eventsDef},${slotDef}> {` + createClassGetters(getters) + '\n}'; From 3cf8238d61c491cfa25c97cfca8911cf5c418ff7 Mon Sep 17 00:00:00 2001 From: firefish5000 <1813610+firefish5000@users.noreply.github.com> Date: Tue, 24 Nov 2020 10:33:46 -0600 Subject: [PATCH 2/3] Undo all non-shim changes. Fix shims --- packages/svelte2tsx/src/svelte2tsx/index.ts | 15 ++++--- packages/svelte2tsx/svelte-shims.d.ts | 45 ++++++++++++--------- 2 files changed, 33 insertions(+), 27 deletions(-) diff --git a/packages/svelte2tsx/src/svelte2tsx/index.ts b/packages/svelte2tsx/src/svelte2tsx/index.ts index 6e4cf1153..15692faaf 100644 --- a/packages/svelte2tsx/src/svelte2tsx/index.ts +++ b/packages/svelte2tsx/src/svelte2tsx/index.ts @@ -281,17 +281,16 @@ function addComponentExport({ fileName, componentDocumentation }: AddComponentExportPara) { - // FIXME: Does this make sense? Are we supposed to be able to listen to events our component does not emit? - const eventsDef = "ReturnType['events']" + (strictEvents ? '' : ' & Record>'); + const eventsDef = strictEvents ? 'render' : '__sveltets_with_any_event(render)'; const propDef = // Omit partial-wrapper only if both strict mode and ts file, because // in a js file the user has no way of telling the language that // the prop is optional - (strictMode && isTsFile - ? "ReturnType['props']" - : "Partial['props']>") - + (uses$$propsOr$$restProps ? ' & Record' : ''); - const slotDef = "ReturnType['slots']"; + strictMode && isTsFile + ? uses$$propsOr$$restProps + ? `__sveltets_with_any(${eventsDef})` + : eventsDef + : `__sveltets_partial${uses$$propsOr$$restProps ? '_with_any' : ''}(${eventsDef})`; const doc = componentDocumentation.getFormatted(); const className = fileName && classNameFromFilename(fileName); @@ -299,7 +298,7 @@ function addComponentExport({ const statement = `\n\n${doc}export default class${ className ? ` ${className}` : '' - } extends Svelte2TsxComponent<${propDef},${eventsDef},${slotDef}> {` + + } extends createSvelte2TsxComponent(${propDef}) {` + createClassGetters(getters) + '\n}'; diff --git a/packages/svelte2tsx/svelte-shims.d.ts b/packages/svelte2tsx/svelte-shims.d.ts index 64c2cc08c..a438588d5 100644 --- a/packages/svelte2tsx/svelte-shims.d.ts +++ b/packages/svelte2tsx/svelte-shims.d.ts @@ -24,23 +24,7 @@ declare class Svelte2TsxComponent< */ $$slot_def: Slots; // https://svelte.dev/docs#Client-side_component_API - constructor(options: { - /** - * An HTMLElement to render to. This option is required. - */ - target: Element; - /** - * A child of `target` to render the component immediately before. - */ - anchor?: Element; - /** - * An object of properties to supply to the component. - */ - props?: Props; - hydrate?: boolean; - intro?: boolean; - $$inline?: boolean; - }); + constructor(options: Svelte2TsxComponentConstructorParameters); /** * Causes the callback function to be called whenever the component dispatches an event. * A function is returned that will remove the event listener when called. @@ -62,7 +46,30 @@ declare class Svelte2TsxComponent< $inject_state(): void; } -type AConstructorTypeOf = new (...args: any[]) => T; +interface Svelte2TsxComponentConstructorParameters { + /** + * An HTMLElement to render to. This option is required. + */ + target: Element; + /** + * A child of `target` to render the component immediately before. + */ + anchor?: Element; + /** + * An object of properties to supply to the component. + */ + props?: Props; + hydrate?: boolean; + intro?: boolean; + $$inline?: boolean; +} + +// TODO: Update all `AConstructorTypeOf` references to pass constructor args when it makes sense. +// Check if should add prototype... seems to work fine without it thus far +type AConstructorTypeOf = new (...args: U) => T; + +// TODO: Replace AConstructorTypeOf with more specific types so intellisense shows helpful hits like 'options' instead of args[0] +type SvelteComponentConstructor> = new (options: U) => T; type SvelteAction = (node: El, ...args:U) => { update?: (...args:U) => void, @@ -174,7 +181,7 @@ declare function __sveltets_each( declare function createSvelte2TsxComponent( render: () => {props?: Props, events?: Events, slots?: Slots } -): AConstructorTypeOf>; +): SvelteComponentConstructor,Svelte2TsxComponentConstructorParameters>; declare function __sveltets_unwrapArr(arr: ArrayLike): T declare function __sveltets_unwrapPromiseLike(promise: PromiseLike | T): T From 3e7613e4165c9850ace8ef11fa57f07149d6a27d Mon Sep 17 00:00:00 2001 From: firefish5000 <1813610+firefish5000@users.noreply.github.com> Date: Tue, 24 Nov 2020 17:09:55 -0600 Subject: [PATCH 3/3] Remove todo notes --- packages/svelte2tsx/svelte-shims.d.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/svelte2tsx/svelte-shims.d.ts b/packages/svelte2tsx/svelte-shims.d.ts index a438588d5..e843ff44c 100644 --- a/packages/svelte2tsx/svelte-shims.d.ts +++ b/packages/svelte2tsx/svelte-shims.d.ts @@ -64,11 +64,7 @@ interface Svelte2TsxComponentConstructorParameters { $$inline?: boolean; } -// TODO: Update all `AConstructorTypeOf` references to pass constructor args when it makes sense. -// Check if should add prototype... seems to work fine without it thus far type AConstructorTypeOf = new (...args: U) => T; - -// TODO: Replace AConstructorTypeOf with more specific types so intellisense shows helpful hits like 'options' instead of args[0] type SvelteComponentConstructor> = new (options: U) => T; type SvelteAction = (node: El, ...args:U) => {