(feat) ComponentEvents interface

packages/svelte2tsx/src/nodes/ComponentEvents.ts

@@ -1,5 +1,6 @@
 import ts from 'typescript';
 import { EventHandler } from './event-handler';
+import { getVariableAtTopLevel } from '../utils/tsAst';
 
 export abstract class ComponentEvents {
     protected events = new Map<string, { type: string; doc?: string }>();
@@ -32,7 +33,7 @@ export class ComponentEventsFromInterface extends ComponentEvents {
         const map = new Map<string, { type: string; doc?: string }>();
 
         node.members.filter(ts.isPropertySignature).forEach((member) => {
-            map.set(member.name.getText(), {
+            map.set(this.getName(member.name), {
                 type: member.type?.getText() || 'Event',
                 doc: this.getDoc(node, member),
             });
@@ -41,6 +42,52 @@ export class ComponentEventsFromInterface extends ComponentEvents {
         return map;
     }
 
+    private getName(prop: ts.PropertyName) {
+        if (ts.isIdentifier(prop) || ts.isStringLiteral(prop)) {
+            return prop.text;
+        }
+
+        if (ts.isComputedPropertyName(prop)) {
+            if (ts.isIdentifier(prop.expression)) {
+                const identifierName = prop.expression.text;
+                const identifierValue = this.getIdentifierValue(prop, identifierName);
+                if (!identifierValue) {
+                    this.throwError(prop);
+                }
+                return identifierValue;
+            }
+        }
+
+        this.throwError(prop);
+    }
+
+    private getIdentifierValue(prop: ts.ComputedPropertyName, identifierName: string) {
+        const variable = getVariableAtTopLevel(prop.getSourceFile(), identifierName);
+        if (variable && ts.isStringLiteral(variable.initializer)) {
+            return variable.initializer.text;
+        }
+    }
+
+    private throwError(prop: ts.PropertyName) {
+        const error: any = new Error(
+            'The ComponentEvents interface can only have properties of type ' +
+                'Identifier, StringLiteral or ComputedPropertyName. ' +
+                'In case of ComputedPropertyName, ' +
+                'it must be a const declared within the component and initialized with a string.',
+        );
+        error.start = toLineColumn(prop.getStart());
+        error.end = toLineColumn(prop.getEnd());
+        throw error;
+
+        function toLineColumn(pos: number) {
+            const lineChar = prop.getSourceFile().getLineAndCharacterOfPosition(pos);
+            return {
+                line: lineChar.line + 1,
+                column: lineChar.character,
+            };
+        }
+    }
+
     private getDoc(node: ts.InterfaceDeclaration, member: ts.PropertySignature) {
         let doc = undefined;
         const comment = ts.getLeadingCommentRanges(

packages/svelte2tsx/src/utils/tsAst.ts

@@ -99,3 +99,24 @@ export function isMember(
 ): node is ts.ElementAccessExpression | ts.PropertyAccessExpression {
     return ts.isElementAccessExpression(node) || ts.isPropertyAccessExpression(node);
 }
+
+/**
+ * Returns variable at given level with given name,
+ * if it is a variable declaration in the form of `const/let a = ..`
+ */
+export function getVariableAtTopLevel(
+    node: ts.SourceFile,
+    identifierName: string,
+): ts.VariableDeclaration | undefined {
+    for (const child of node.statements) {
+        if (ts.isVariableStatement(child)) {
+            const variable = child.declarationList.declarations.find(
+                (declaration) =>
+                    ts.isIdentifier(declaration.name) && declaration.name.text === identifierName,
+            );
+            if (variable) {
+                return variable;
+            }
+        }
+    }
+}

packages/svelte2tsx/test/svelte2tsx/index.js

@@ -16,15 +16,20 @@ describe('svelte2tsx', () => {
 		}
 
 		(solo ? it.only : it)(dir, () => {
-            const input = fs.readFileSync(`${__dirname}/samples/${dir}/input.svelte`, 'utf-8').replace(/\s+$/, '').replace(/\r\n/g, "\n");
-            const expectedOutput = fs.readFileSync(`${__dirname}/samples/${dir}/expected.tsx`, 'utf-8').replace(/\s+$/, '').replace(/\r\n/g, "\n");
+			const path = `${__dirname}/samples/${dir}`;
+            const input = fs.readFileSync(`${path}/input.svelte`, 'utf-8').replace(/\s+$/, '').replace(/\r\n/g, "\n");
+			const expectedOutput = fs.readFileSync(`${path}/expected.tsx`, 'utf-8').replace(/\s+$/, '').replace(/\r\n/g, "\n");
+			const expecterOtherOutput = fs.existsSync(`${path}/expected.js`) && require(`${path}/expected`);
 
-            const { map, code} = svelte2tsx(input, {
+            const output = svelte2tsx(input, {
 				strictMode: dir.includes('strictMode'),
 				isTsFile: dir.startsWith('ts-'),
 				filename: 'input.svelte'
 			});
-            assert.equal(code, expectedOutput);
+			assert.equal(output.code, expectedOutput);
+			if (expecterOtherOutput) {
+				expecterOtherOutput(output);
+			}
 		});
 	});
 });

packages/svelte2tsx/test/svelte2tsx/samples/component-events-interface-constant/expected.js

@@ -0,0 +1,12 @@
+let assert = require('assert')
+
+module.exports = function ({events}) {
+    assert.deepEqual(
+        events.getAll(),
+        [
+            {name: 'a', type: 'boolean', doc: ' Some doc'},
+            {name: 'b', type: 'string', doc: undefined},
+            {name: 'c', type: 'Event', doc: undefined}
+        ]
+    );
+}

packages/svelte2tsx/test/svelte2tsx/samples/component-events-interface-constant/expected.tsx

@@ -0,0 +1,19 @@
+///<reference types="svelte" />
+<></>;function render() {
+
+    const A = 'a';
+    const B = 'b', C = 'c';
+    interface ComponentEvents {
+        /**
+         * Some doc
+         */
+        [A]: boolean;
+        [B]: string;
+        [C];
+    }
+;
+() => (<></>);
+return { props: {}, slots: {}, getters: {}, events: {} as unknown as ComponentEvents }}
+
+export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(render)) {
+}

packages/svelte2tsx/test/svelte2tsx/samples/component-events-interface-constant/input.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+    const A = 'a';
+    const B = 'b', C = 'c';
+    interface ComponentEvents {
+        /**
+         * Some doc
+         */
+        [A]: boolean;
+        [B]: string;
+        [C];
+    }
+</script>

packages/svelte2tsx/test/svelte2tsx/samples/component-events-interface-string-literals/expected.js

@@ -0,0 +1,12 @@
+let assert = require('assert')
+
+module.exports = function ({events}) {
+    assert.deepEqual(
+        events.getAll(),
+        [
+            {name: 'a-b', type: 'boolean', doc: ' Some doc'},
+            {name: 'b', type: 'string', doc: undefined},
+            {name: 'c', type: 'Event', doc: undefined}
+        ]
+    );
+}

packages/svelte2tsx/test/svelte2tsx/samples/component-events-interface-string-literals/expected.tsx

@@ -0,0 +1,17 @@
+///<reference types="svelte" />
+<></>;function render() {
+
+    interface ComponentEvents {
+        /**
+         * Some doc
+         */
+        'a-b': boolean;
+        'b': string;
+        'c';
+    }
+;
+() => (<></>);
+return { props: {}, slots: {}, getters: {}, events: {} as unknown as ComponentEvents }}
+
+export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(render)) {
+}

packages/svelte2tsx/test/svelte2tsx/samples/component-events-interface-string-literals/input.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    interface ComponentEvents {
+        /**
+         * Some doc
+         */
+        'a-b': boolean;
+        'b': string;
+        'c';
+    }
+</script>

packages/svelte2tsx/test/svelte2tsx/samples/component-events-interface/expected.js

@@ -0,0 +1,12 @@
+let assert = require('assert')
+
+module.exports = function ({events}) {
+    assert.deepEqual(
+        events.getAll(),
+        [
+            {name: 'a', type: 'boolean', doc: ' Some doc'},
+            {name: 'b', type: 'string', doc: undefined},
+            {name: 'c', type: 'Event', doc: undefined}
+        ]
+    );
+}

packages/svelte2tsx/test/svelte2tsx/samples/component-events-interface/expected.tsx

@@ -5,9 +5,9 @@
         /**
          * Some doc
          */
-         a: boolean;
-         b: string;
-         c;
+        a: boolean;
+        b: string;
+        c;
     }
 ;
 () => (<></>);

packages/svelte2tsx/test/svelte2tsx/samples/component-events-interface/input.svelte

@@ -3,8 +3,8 @@
         /**
          * Some doc
          */
-         a: boolean;
-         b: string;
-         c;
+        a: boolean;
+        b: string;
+        c;
     }
 </script>