(rework) extend from svelte2tsx base class (#386)

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.
sveltejs · Aug 6, 2020 · a032ff2 · a032ff2
1 parent ddaa8e9
commit a032ff2
Show file tree

Hide file tree

Showing 71 changed files with 149 additions and 296 deletions.
diff --git 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) {
@@ -854,18 +854,17 @@ function addComponentExport(
         // the prop is optional
         strictMode && isTsFile
             ? uses$$propsOr$$restProps
-                ? '__sveltets_with_any(render().props)'
-                : 'render().props'
-            : `__sveltets_partial${uses$$propsOr$$restProps ? '_with_any' : ''}(render().props)`;
+                ? '__sveltets_with_any(render)'
+                : 'render'
+            : `__sveltets_partial${uses$$propsOr$$restProps ? '_with_any' : ''}(render)`;
 
     const doc = formatComponentDocumentation(componentDocumentation);
 
     const statement =
-        `\n\n${doc}export default class ${
-            className ? `${className} ` : ''
-        }{\n    $$prop_def = ${propDef}\n    $$slot_def = render().slots` +
+        `\n\n${doc}export default class${
+            className ? ` ${className}` : ''
+        } extends createSvelte2TsxComponent(${propDef}) {` +
         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
@@ -1,10 +1,62 @@
 declare module '*.svelte' {
-    export default class {
-        $$prop_def: any;
-        $$slot_def: any;
+    export default Svelte2TsxComponent
+}
 
-        $on(event: string, handler: (e: Event) => any): () => void
-    }
+declare class Svelte2TsxComponent<
+    Props extends {} = {},
+    Events extends {} = {},
+    Slots extends {} = {},
+    StrictEvents extends boolean = true
+> {
+    // 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<K extends keyof Events>(event: K, handler: (e: SvelteExtractEvent<Events[K]>) => any): void;
+    /**
+     * 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(event: StrictEvents extends true ? never : string, handler: (e: CustomEvent) => any): void;
+    /**
+     * 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 `<script>` block.
+     * Calling this method schedules an update for the next microtask — the DOM is __not__ updated synchronously.
+     */
+    $set(props: Partial<Props>): void;
 }
 
 type AConstructorTypeOf<T> = new (...args: any[]) => T;
@@ -35,7 +87,6 @@ type SvelteAnimation<U extends any[]> = (node: Element, move: { from: DOMRect, t
 type SvelteAllProps = { [index: string]: any }
 type SvelteRestProps = { [index: string]: any }
 type SvelteStore<T> = { subscribe: (run: (value: T) => any, invalidate?: any) => any }
-type SvelteComponent = import('*.svelte').default
 type SvelteEventRecord = Record<string, Event | Event[]>
 type SvelteExtractEvent<T> = T extends any[] ? T[number] : T;
 type SvelteOnEvent<T, K extends keyof T> = (
@@ -59,13 +110,19 @@ declare function __sveltets_ensureType<T>(type: AConstructorTypeOf<T>, el: T): {
 declare function __sveltets_instanceOf<T>(type: AConstructorTypeOf<T>): T;
 declare function __sveltets_allPropsType(): SvelteAllProps
 declare function __sveltets_restPropsType(): SvelteRestProps
-declare function __sveltets_partial<T>(obj: T): Partial<T>;
-declare function __sveltets_partial_with_any<T>(obj: T): Partial<T> & SvelteAllProps
-declare function __sveltets_with_any<T>(obj: T): T & SvelteAllProps
+declare function __sveltets_partial<Props = {}, Events = {}, Slots = {}>(
+    render: () => {props?: Props, events?: Events, slots?: Slots }
+): () => {props?: Partial<Props>, events?: Events, slots?: Slots }
+declare function __sveltets_partial_with_any<Props = {}, Events = {}, Slots = {}>(
+    render: () => {props?: Props, events?: Events, slots?: Slots }
+): () => {props?: Partial<Props> & SvelteAllProps, events?: Events, slots?: Slots }
+declare function __sveltets_with_any<Props = {}, Events = {}, Slots = {}>(
+    render: () => {props?: Props, events?: Events, slots?: Slots }
+): () => {props?: Props & SvelteAllProps, events?: Events, slots?: Slots }
 declare function __sveltets_store_get<T = any>(store: SvelteStore<T>): T
 declare function __sveltets_any(dummy: any): any;
 declare function __sveltets_empty(dummy: any): {};
-declare function __sveltets_componentType(): AConstructorTypeOf<SvelteComponent>
+declare function __sveltets_componentType(): AConstructorTypeOf<Svelte2TsxComponent>
 declare function __sveltets_invalidate<T>(getValue: () => T): T
 declare function __sveltets_eventDef<T extends SvelteEventRecord>(def: T): SvelteOnAllEvent<T>
 declare function __sveltets_mapWindowEvent<K extends keyof HTMLBodyElementEventMap>(
@@ -107,3 +164,7 @@ declare function __sveltets_each<T>(
     array: ArrayLike<T>,
     callbackfn: (value: T, index: number) => any
 ): any;
+
+declare function createSvelte2TsxComponent<Props, Events, Slots>(
+    render: () => {props?: Props, events?: Events, slots?: Slots }
+): AConstructorTypeOf<Svelte2TsxComponent<Props, Events, Slots, false>>;
diff --git a/packages/svelte2tsx/test/sourcemaps/event-binding.html b/packages/svelte2tsx/test/sourcemaps/event-binding.html
@@ -5,10 +5,7 @@
                                       3====  4==================
 return { props: {}, slots: {}, getters: {}, events: {} }}
 
-export default class {
-    $$prop_def = __sveltets_partial(render().props)
-    $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events)
+export default class extends createSvelte2TsxComponent(__sveltets_partial(render)) {
 }
 !Expected
 <Component on:click={$check ? method1 : method2} />

diff --git a/packages/svelte2tsx/test/sourcemaps/let.html b/packages/svelte2tsx/test/sourcemaps/let.html
@@ -6,10 +6,7 @@
 </>);
 return { props: {}, slots: {}, getters: {}, events: {} }}
 
-export default class {
-    $$prop_def = __sveltets_partial(render().props)
-    $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events)
+export default class extends createSvelte2TsxComponent(__sveltets_partial(render)) {
 }
 !Expected
 <script>

diff --git a/packages/svelte2tsx/test/sourcemaps/repl.html b/packages/svelte2tsx/test/sourcemaps/repl.html
@@ -179,10 +179,7 @@
 </>);
 return { props: {slug: slug , chapter: chapter}, slots: {}, getters: {}, events: {} }}
 
-export default class {
-    $$prop_def = __sveltets_partial(render().props)
-    $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events)
+export default class extends createSvelte2TsxComponent(__sveltets_partial(render)) {
 }
 !Expected
 <script context="module">

diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/$store-index/expected.tsx b/packages/svelte2tsx/test/svelte2tsx/samples/$store-index/expected.tsx
@@ -4,8 +4,5 @@
 {someObject.$store}</>
 return { props: {}, slots: {}, getters: {}, events: {} }}
 
-export default class Input__SvelteComponent_ {
-    $$prop_def = __sveltets_partial(render().props)
-    $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events)
+export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(render)) {
 }
diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/array-binding-export/expected.tsx b/packages/svelte2tsx/test/svelte2tsx/samples/array-binding-export/expected.tsx
@@ -5,8 +5,5 @@
 () => (<></>);
 return { props: {a: a , b: b , c: c}, slots: {}, getters: {}, events: {} }}
 
-export default class Input__SvelteComponent_ {
-    $$prop_def = __sveltets_partial(render().props)
-    $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events)
+export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(render)) {
 }
diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/ast-offset-none/expected.tsx b/packages/svelte2tsx/test/svelte2tsx/samples/ast-offset-none/expected.tsx
@@ -3,8 +3,5 @@ __sveltets_store_get(var);
 () => (<></>);
 return { props: {}, slots: {}, getters: {}, events: {} }}
 
-export default class Input__SvelteComponent_ {
-    $$prop_def = __sveltets_partial(render().props)
-    $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events)
+export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(render)) {
 }
diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/ast-offset-some/expected.tsx b/packages/svelte2tsx/test/svelte2tsx/samples/ast-offset-some/expected.tsx
@@ -3,8 +3,5 @@
 () => (<></>);
 return { props: {}, slots: {}, getters: {}, events: {} }}
 
-export default class Input__SvelteComponent_ {
-    $$prop_def = __sveltets_partial(render().props)
-    $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events)
+export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(render)) {
 }
diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/await-with-$store/expected.tsx b/packages/svelte2tsx/test/svelte2tsx/samples/await-with-$store/expected.tsx
@@ -14,8 +14,5 @@ function render() {
 </>})}}</>);
 return { props: {}, slots: {}, getters: {}, events: {} }}
 
-export default class Input__SvelteComponent_ {
-    $$prop_def = __sveltets_partial(render().props)
-    $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events)
+export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(render)) {
 }
diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/binding-group-store/expected.tsx b/packages/svelte2tsx/test/svelte2tsx/samples/binding-group-store/expected.tsx
@@ -2,8 +2,5 @@
 <><input id="dom-input" type="radio" {...__sveltets_empty(__sveltets_store_get(compile_options).generate)} value="dom"/></>
 return { props: {}, slots: {}, getters: {}, events: {} }}
 
-export default class Input__SvelteComponent_ {
-    $$prop_def = __sveltets_partial(render().props)
-    $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events)
+export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(render)) {
 }
diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/circle-drawer-example/expected.tsx b/packages/svelte2tsx/test/svelte2tsx/samples/circle-drawer-example/expected.tsx
@@ -89,8 +89,5 @@
 </>}}}</>);
 return { props: {}, slots: {}, getters: {}, events: {} }}
 
-export default class Input__SvelteComponent_ {
-    $$prop_def = __sveltets_partial(render().props)
-    $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events)
+export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(render)) {
 }
diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/component-default-slot/expected.tsx b/packages/svelte2tsx/test/svelte2tsx/samples/component-default-slot/expected.tsx
@@ -8,8 +8,5 @@
 </div></>);
 return { props: {}, slots: {default: {a:b}}, getters: {}, events: {} }}
 
-export default class Input__SvelteComponent_ {
-    $$prop_def = __sveltets_partial(render().props)
-    $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events)
+export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(render)) {
 }
diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/component-multiple-slots/expected.tsx b/packages/svelte2tsx/test/svelte2tsx/samples/component-multiple-slots/expected.tsx
@@ -11,8 +11,5 @@
 </div></>);
 return { props: {}, slots: {default: {a:b}, test: {c:d, e:e}}, getters: {}, events: {} }}
 
-export default class Input__SvelteComponent_ {
-    $$prop_def = __sveltets_partial(render().props)
-    $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events)
+export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(render)) {
 }
diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/component-slot-crazy-attributes/expected.tsx b/packages/svelte2tsx/test/svelte2tsx/samples/component-slot-crazy-attributes/expected.tsx
@@ -8,8 +8,5 @@
 </div></>);
 return { props: {}, slots: {default: {a:b, b:b, c:"b", d:"__svelte_ts_string", e:b}}, getters: {}, events: {} }}
 
-export default class Input__SvelteComponent_ {
-    $$prop_def = __sveltets_partial(render().props)
-    $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events)
+export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(render)) {
 }
diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/component-with-documentation/expected.tsx b/packages/svelte2tsx/test/svelte2tsx/samples/component-with-documentation/expected.tsx
@@ -5,8 +5,5 @@
 return { props: {}, slots: {}, getters: {}, events: {} }}
 
 /** This component does nothing at all */
-export default class Input__SvelteComponent_ {
-    $$prop_def = __sveltets_partial(render().props)
-    $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events)
+export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(render)) {
 }
diff --git a/...2tsx/test/svelte2tsx/samples/component-with-indented-multiline-documentation/expected.tsx b/...2tsx/test/svelte2tsx/samples/component-with-indented-multiline-documentation/expected.tsx
@@ -17,8 +17,5 @@ return { props: {}, slots: {}, getters: {}, events: {} }}
  *
  * The output should be indented properly!
  */
-export default class Input__SvelteComponent_ {
-    $$prop_def = __sveltets_partial(render().props)
-    $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events)
+export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(render)) {
 }
diff --git a/...es/svelte2tsx/test/svelte2tsx/samples/component-with-multiline-documentation/expected.tsx b/...es/svelte2tsx/test/svelte2tsx/samples/component-with-multiline-documentation/expected.tsx
@@ -11,8 +11,5 @@ return { props: {}, slots: {}, getters: {}, events: {} }}
  * type Type = 'type'
  * ```
  */
-export default class Input__SvelteComponent_ {
-    $$prop_def = __sveltets_partial(render().props)
-    $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events)
+export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(render)) {
 }
diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/event-bubble-component-multi/expected.tsx b/packages/svelte2tsx/test/svelte2tsx/samples/event-bubble-component-multi/expected.tsx
@@ -3,8 +3,5 @@
 <Radio ></Radio></>
 return { props: {}, slots: {}, getters: {}, events: {'click':[__sveltets_bubbleEventDef(__sveltets_instanceOf(Button).$on, 'click'),__sveltets_bubbleEventDef(__sveltets_instanceOf(Radio).$on, 'click')]} }}
 
-export default class Input__SvelteComponent_ {
-    $$prop_def = __sveltets_partial(render().props)
-    $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events)
+export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(render)) {
 }
diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/event-bubble-component/expected.tsx b/packages/svelte2tsx/test/svelte2tsx/samples/event-bubble-component/expected.tsx
@@ -2,8 +2,5 @@
 <><Button ></Button></>
 return { props: {}, slots: {}, getters: {}, events: {'click':__sveltets_bubbleEventDef(__sveltets_instanceOf(Button).$on, 'click')} }}
 
-export default class Input__SvelteComponent_ {
-    $$prop_def = __sveltets_partial(render().props)
-    $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events)
+export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(render)) {
 }
diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/event-bubble-element/expected.tsx b/packages/svelte2tsx/test/svelte2tsx/samples/event-bubble-element/expected.tsx
@@ -2,8 +2,5 @@
 <><button onclick={undefined}></button></>
 return { props: {}, slots: {}, getters: {}, events: {'click':__sveltets_mapElementEvent('click')} }}
 
-export default class Input__SvelteComponent_ {
-    $$prop_def = __sveltets_partial(render().props)
-    $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events)
+export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(render)) {
 }
diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/event-bubble-svelte-element/expected.tsx b/packages/svelte2tsx/test/svelte2tsx/samples/event-bubble-svelte-element/expected.tsx
@@ -3,8 +3,5 @@
 <sveltewindow onresize={undefined}></sveltewindow></>
 return { props: {}, slots: {}, getters: {}, events: {'click':__sveltets_mapBodyEvent('click'), 'resize':__sveltets_mapWindowEvent('resize')} }}
 
-export default class Input__SvelteComponent_ {
-    $$prop_def = __sveltets_partial(render().props)
-    $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events)
+export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(render)) {
 }
diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/export-class/expected.tsx b/packages/svelte2tsx/test/svelte2tsx/samples/export-class/expected.tsx
@@ -5,9 +5,6 @@
 () => (<></>);
 return { props: {}, slots: {}, getters: {Foo: Foo}, events: {} }}
 
-export default class Input__SvelteComponent_ {
-    $$prop_def = __sveltets_partial(render().props)
-    $$slot_def = render().slots
+export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(render)) {
     get Foo() { return render().getters.Foo }
-    $on = __sveltets_eventDef(render().events)
 }
diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/export-js-strictMode/expected.tsx b/packages/svelte2tsx/test/svelte2tsx/samples/export-js-strictMode/expected.tsx
@@ -7,8 +7,5 @@
 () => (<></>);
 return { props: {a: a , b: b , c: c}, slots: {}, getters: {}, events: {} }}
 
-export default class Input__SvelteComponent_ {
-    $$prop_def = __sveltets_partial(render().props)
-    $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events)
+export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(render)) {
 }
diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/export-list/expected.tsx b/packages/svelte2tsx/test/svelte2tsx/samples/export-list/expected.tsx
@@ -7,8 +7,5 @@
 () => (<></>);
 return { props: {name: name , name2: name2}, slots: {}, getters: {}, events: {} }}
 
-export default class Input__SvelteComponent_ {
-    $$prop_def = __sveltets_partial(render().props)
-    $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events)
+export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(render)) {
 }