From 8b61eb75e34542b37c331a31e2a2977313aa7d96 Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Thu, 30 Jul 2020 15:58:31 +0200 Subject: [PATCH 1/7] (rework) extend from svelte2tsx base class Things like `$$prop_def` live in a `Svelte2TsxComponent` base class now. Saves some characters per transformation and opens up the door for easier manual `d.ts` creation. --- packages/svelte2tsx/src/svelte2tsx.ts | 11 +++++------ packages/svelte2tsx/svelte-shims.d.ts | 14 ++++++++++++++ 2 files changed, 19 insertions(+), 6 deletions(-) diff --git a/packages/svelte2tsx/src/svelte2tsx.ts b/packages/svelte2tsx/src/svelte2tsx.ts index 00348c5c6..11455651e 100644 --- a/packages/svelte2tsx/src/svelte2tsx.ts +++ b/packages/svelte2tsx/src/svelte2tsx.ts @@ -534,7 +534,7 @@ function processInstanceScriptContent(str: MagicString, script: Node): InstanceS if ( (ts.isPrefixUnaryExpression(parent) || ts.isPostfixUnaryExpression(parent)) && parent.operator !== - ts.SyntaxKind.ExclamationToken /* `!$store` does not need processing */ + ts.SyntaxKind.ExclamationToken /* `!$store` does not need processing */ ) { let simpleOperator: string; if (parent.operator === ts.SyntaxKind.PlusPlusToken) { @@ -861,11 +861,10 @@ function addComponentExport( const doc = formatComponentDocumentation(componentDocumentation); const statement = - `\n\n${doc}export default class ${ + `\nconst _${className} = createSvelte2TsxComponent(render);\n\n${doc}export default class ${ className ? `${className} ` : '' - }{\n $$prop_def = ${propDef}\n $$slot_def = render().slots` + + } extends _${className} {` + createClassGetters(getters) + - `\n $on = __sveltets_eventDef(render().events)` + '\n}'; str.append(statement); @@ -949,7 +948,7 @@ function createRenderFunction({ const returnString = `\nreturn { props: ${exportedNames.createPropsStr( - isTsFile + isTsFile, )}, slots: ${slotsAsDef}, getters: ${createRenderFunctionGetterStr(getters)}` + `, events: ${eventMapToString(events)} }}`; @@ -1043,6 +1042,6 @@ export function svelte2tsx( return { code: str.toString(), map: str.generateMap({ hires: true, source: options?.filename }), - exportedNames + exportedNames, }; } diff --git a/packages/svelte2tsx/svelte-shims.d.ts b/packages/svelte2tsx/svelte-shims.d.ts index 0aa8a23f4..8efe3a95c 100644 --- a/packages/svelte2tsx/svelte-shims.d.ts +++ b/packages/svelte2tsx/svelte-shims.d.ts @@ -3,7 +3,10 @@ declare module '*.svelte' { $$prop_def: any; $$slot_def: any; + // https://svelte.dev/docs#Client-side_component_API $on(event: string, handler: (e: Event) => any): () => void + $set(props: any): void; + $destroy(): void; } } @@ -94,3 +97,14 @@ declare function __sveltets_each( array: ArrayLike, callbackfn: (value: T, index: number) => any ): any; + +declare class Svelte2TsxComponent { + $$prop_def: Props; + $$slot_def: Slots; + // https://svelte.dev/docs#Client-side_component_API + $on: SvelteOnAllEvent; + $destroy(): void; + $set(props: Partial): void; +} +declare type Constructor = new (...args: any[]) => T; +declare function createSvelte2TsxComponent(render: () => {props?: Props, slots?: Slots, events?: Events }): Constructor>; From 378ca19eecae621cdf582216a3f3e5751fd158a5 Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Mon, 3 Aug 2020 12:39:07 +0200 Subject: [PATCH 2/7] update/consolidate typings --- packages/svelte2tsx/svelte-shims.d.ts | 42 ++++++++++++++------------- 1 file changed, 22 insertions(+), 20 deletions(-) diff --git a/packages/svelte2tsx/svelte-shims.d.ts b/packages/svelte2tsx/svelte-shims.d.ts index 8efe3a95c..83fc43b02 100644 --- a/packages/svelte2tsx/svelte-shims.d.ts +++ b/packages/svelte2tsx/svelte-shims.d.ts @@ -1,13 +1,23 @@ declare module '*.svelte' { - export default class { - $$prop_def: any; - $$slot_def: any; + export default Svelte2TsxComponent +} - // https://svelte.dev/docs#Client-side_component_API - $on(event: string, handler: (e: Event) => any): () => void - $set(props: any): void; - $destroy(): void; - } +declare class Svelte2TsxComponent { + // svelte2tsx-specific + $$prop_def: Props; + $$slot_def: Slots; + // https://svelte.dev/docs#Client-side_component_API + constructor(options: { + target: Element; + anchor?: Element; + props?: Props; + hydrate?: boolean; + intro?: boolean; + $$inline?: boolean; + }); + $on: SvelteOnAllEvent; + $destroy(): void; + $set(props: Partial): void; } type AConstructorTypeOf = new (...args: any[]) => T; @@ -38,7 +48,6 @@ type SvelteAnimation = (node: Element, move: { from: DOMRect, t type SvelteAllProps = { [index: string]: any } type SvelteRestProps = { [index: string]: any } type SvelteStore = { subscribe: (run: (value: T) => any, invalidate?: any) => any } -type SvelteComponent = import('*.svelte').default type SvelteEventRecord = Record type SvelteExtractEvent = T extends any[] ? T[number] : T; type SvelteOnEvent = ( @@ -64,7 +73,7 @@ declare function __sveltets_with_any(obj: T): T & SvelteAllProps declare function __sveltets_store_get(store: SvelteStore): T declare function __sveltets_any(dummy: any): any; declare function __sveltets_empty(dummy: any): {}; -declare function __sveltets_componentType(): AConstructorTypeOf +declare function __sveltets_componentType(): AConstructorTypeOf declare function __sveltets_invalidate(getValue: () => T): T declare function __sveltets_eventDef(def: T): SvelteOnAllEvent declare function __sveltets_mapWindowEvent( @@ -98,13 +107,6 @@ declare function __sveltets_each( callbackfn: (value: T, index: number) => any ): any; -declare class Svelte2TsxComponent { - $$prop_def: Props; - $$slot_def: Slots; - // https://svelte.dev/docs#Client-side_component_API - $on: SvelteOnAllEvent; - $destroy(): void; - $set(props: Partial): void; -} -declare type Constructor = new (...args: any[]) => T; -declare function createSvelte2TsxComponent(render: () => {props?: Props, slots?: Slots, events?: Events }): Constructor>; +declare function createSvelte2TsxComponent( + render: () => {props?: Props, events?: Events, slots?: Slots } +): AConstructorTypeOf>; From 9a72b7ba5a8efc5b982f4adcca51a8a0febafd0f Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Mon, 3 Aug 2020 18:21:39 +0200 Subject: [PATCH 3/7] tsdoc --- packages/svelte2tsx/svelte-shims.d.ts | 29 +++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/packages/svelte2tsx/svelte-shims.d.ts b/packages/svelte2tsx/svelte-shims.d.ts index 83fc43b02..c2883f0b5 100644 --- a/packages/svelte2tsx/svelte-shims.d.ts +++ b/packages/svelte2tsx/svelte-shims.d.ts @@ -4,19 +4,48 @@ declare module '*.svelte' { declare class Svelte2TsxComponent { // svelte2tsx-specific + /** + * @internal This is for type checking capabilities only + * and does not exist at runtime. Don't use this property. + */ $$prop_def: Props; + /** + * @internal This is for type checking capabilities only + * and does not exist at runtime. Don't use this property. + */ $$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; }); + /** + * 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. + */ $on: SvelteOnAllEvent; + /** + * Removes a component from the DOM and triggers any `onDestroy` handlers. + */ $destroy(): void; + /** + * Programmatically sets props on an instance. + * `component.$set({ x: 1 })` is equivalent to `x = 1` inside the component's `