fix: generic const modifier (#2118)

#2107

Switching to let TypeScript parse the generic attribute by wrapping it with an arrow function.

Author: jasonlyu123

packages/svelte2tsx/src/svelte2tsx/nodes/Generics.ts

@@ -14,13 +14,36 @@ export class Generics {
         this.genericsAttr = script.attributes.find((attr) => attr.name === 'generics');
         const generics = this.genericsAttr?.value[0]?.raw as string | undefined;
         if (generics) {
-            this.definitions = generics.split(',').map((g) => g.trim());
-            this.references = this.definitions.map((def) => def.split(/\s/)[0]);
+            const typeParameters = this.getGenericTypeParameters(generics);
+
+            this.definitions = typeParameters?.map((param) => param.getText()) ?? [];
+            this.references = typeParameters?.map((param) => param.name.getText()) ?? [];
         } else {
             this.genericsAttr = undefined;
         }
     }
 
+    private getGenericTypeParameters(rawGenericsAttr: string) {
+        const sourceFile = ts.createSourceFile(
+            'index.ts',
+            `<${rawGenericsAttr}>() => {}`,
+            ts.ScriptTarget.Latest,
+            true
+        );
+        const firstStatement = sourceFile.statements[0];
+
+        if (!firstStatement || !ts.isExpressionStatement(firstStatement)) {
+            return;
+        }
+
+        const arrowFunction = firstStatement.expression;
+        if (!ts.isArrowFunction(arrowFunction)) {
+            return;
+        }
+
+        return arrowFunction.typeParameters;
+    }
+
     addIfIsGeneric(node: ts.Node) {
         if (ts.isTypeAliasDeclaration(node) && this.is$$GenericType(node.type)) {
             if (this.genericsAttr) {

packages/svelte2tsx/test/helpers.ts

@@ -11,7 +11,7 @@ function can_auto_update() {
     if (!process.argv.includes('--auto') && !all_tests_skipped) {
         if (update_count++ === 0) {
             process.on('exit', () => {
-                const command = color.yellow('yarn run test --auto');
+                const command = color.yellow('pnpm run test -- --auto');
                 console.log(`  Run ${command} to update ${update_count} files\n`);
             });
         }

packages/svelte2tsx/test/svelte2tsx/samples/generic-attribute-const-modifier/expectedv2.ts

@@ -0,0 +1,23 @@
+///<reference types="svelte" />
+;function render<const T extends readonly string[]>() {
+
+ let items: T/*Ωignore_startΩ*/;items = __sveltets_2_any(items);/*Ωignore_endΩ*/;
+;
+async () => {};
+return { props: {items: items}, slots: {}, events: {} }}
+class __sveltets_Render<const T extends readonly string[]> {
+    props() {
+        return render<T>().props;
+    }
+    events() {
+        return __sveltets_2_with_any_event(render<T>()).events;
+    }
+    slots() {
+        return render<T>().slots;
+    }
+}
+
+
+import { SvelteComponentTyped as __SvelteComponentTyped__ } from "svelte" 
+export default class Input__SvelteComponent_<const T extends readonly string[]> extends __SvelteComponentTyped__<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> {
+}

packages/svelte2tsx/test/svelte2tsx/samples/generic-attribute-const-modifier/input.svelte

@@ -0,0 +1,3 @@
+<script lang="ts" generics="const T extends readonly string[]">
+export let items: T;
+</script>