Skip to content

Commit 9e1f5d3

Browse files
dummdidummdummdidumm
authored
(feat) enable actions to enhance typings on applied element (#1553)
#1243 #431 This assumes we also enhance the typing of the action type in Svelte core so they match
1 parent 7d6d2e6 commit 9e1f5d3

File tree

15 files changed

+249
-92
lines changed

15 files changed

+249
-92
lines changed

‎packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/actions-enhance-types.only/expected.json‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
[
2+
{
3+
"range": {
4+
"start": { "line": 22, "character": 9 },
5+
"end": { "line": 22, "character": 14 }
6+
},
7+
"severity": 1,
8+
"source": "ts",
9+
"message": "Argument of type '{ $$_attributes: { foo: string; 'on:bar': (e: CustomEvent<boolean>) => void; }; }' is not assignable to parameter of type 'SvelteActionReturnType'.",
10+
"code": 2345,
11+
"tags": []
12+
},
13+
{
14+
"range": {
15+
"start": { "line": 22, "character": 16 },
16+
"end": { "line": 22, "character": 19 }
17+
},
18+
"severity": 1,
19+
"source": "ts",
20+
"message": "Type '{ foo: string; onbar: (e: CustomEvent<boolean>) => void; }' is not assignable to type 'HTMLProps<HTMLDivElement>'.\n Property 'foo' does not exist on type 'HTMLProps<HTMLDivElement>'.",
21+
"code": 2322,
22+
"tags": []
23+
},
24+
{
25+
"range": {
26+
"start": { "line": 25, "character": 9 },
27+
"end": { "line": 25, "character": 14 }
28+
},
29+
"severity": 1,
30+
"source": "ts",
31+
"message": "Argument of type '{ $$_attributes: { foo: string; 'on:bar': (e: CustomEvent<boolean>) => void; }; }' is not assignable to parameter of type 'SvelteActionReturnType'.",
32+
"code": 2345,
33+
"tags": []
34+
},
35+
{
36+
"range": {
37+
"start": { "line": 25, "character": 16 },
38+
"end": { "line": 25, "character": 19 }
39+
},
40+
"severity": 1,
41+
"source": "ts",
42+
"message": "Type '{ foo: number; onbar: (e: CustomEvent<boolean>) => void; }' is not assignable to type 'HTMLProps<HTMLDivElement>'.\n Property 'foo' does not exist on type 'HTMLProps<HTMLDivElement>'.",
43+
"code": 2322,
44+
"tags": []
45+
},
46+
{
47+
"range": {
48+
"start": { "line": 26, "character": 9 },
49+
"end": { "line": 26, "character": 14 }
50+
},
51+
"severity": 1,
52+
"source": "ts",
53+
"message": "Argument of type '{ $$_attributes: { foo: string; 'on:bar': (e: CustomEvent<boolean>) => void; }; }' is not assignable to parameter of type 'SvelteActionReturnType'.",
54+
"code": 2345,
55+
"tags": []
56+
},
57+
{
58+
"range": {
59+
"start": { "line": 26, "character": 16 },
60+
"end": { "line": 26, "character": 19 }
61+
},
62+
"severity": 1,
63+
"source": "ts",
64+
"message": "Type '{ foo: string; onbar: (e: CustomEvent<string>) => void; }' is not assignable to type 'HTMLProps<HTMLDivElement>'.\n Property 'foo' does not exist on type 'HTMLProps<HTMLDivElement>'.",
65+
"code": 2322,
66+
"tags": []
67+
}
68+
]

‎packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/actions-enhance-types.only/expectedv2.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
[
2+
{
3+
"range": {
4+
"start": { "line": 25, "character": 16 },
5+
"end": { "line": 25, "character": 19 }
6+
},
7+
"severity": 1,
8+
"source": "ts",
9+
"message": "Type 'number' is not assignable to type 'string'.",
10+
"code": 2322,
11+
"tags": []
12+
},
13+
{
14+
"range": {
15+
"start": { "line": 26, "character": 31 },
16+
"end": { "line": 26, "character": 34 }
17+
},
18+
"severity": 1,
19+
"source": "ts",
20+
"message": "Type '(e: CustomEvent<string>) => void' is not assignable to type '(e: CustomEvent<boolean>) => void'.\n Types of parameters 'e' and 'e' are incompatible.\n Type 'CustomEvent<boolean>' is not assignable to type 'CustomEvent<string>'.\n Type 'boolean' is not assignable to type 'string'.",
21+
"code": 2322,
22+
"tags": []
23+
}
24+
]

‎packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/actions-enhance-types.only/input.svelte‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<script lang="ts">
2+
function action(node: any) {
3+
node;
4+
return {
5+
// TODO: replace this with the Svelte interface generic once it lands in Svelte; this fails for the old transformation
6+
$$_attributes: {
7+
foo: 'string',
8+
'on:bar': (e: CustomEvent<boolean>) => {e;}
9+
}
10+
}
11+
}
12+
13+
function onBar(e: CustomEvent<boolean>) {
14+
e;
15+
}
16+
17+
function onWrongBar(e: CustomEvent<string>) {
18+
e;
19+
}
20+
</script>
21+
22+
<!-- valid for new transformation -->
23+
<div use:action foo="valid" on:bar={onBar} />
24+
25+
<!-- invalid -->
26+
<div use:action foo={1} on:bar={onBar} />
27+
<div use:action foo="valid" on:bar={onWrongBar} />

‎packages/svelte2tsx/src/htmlxtojsx_v2/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@ export function convertHtmlxToJsx(
132132
handleStyleDirective(str, node as StyleDirective, element as Element);
133133
break;
134134
case 'Action':
135-
handleActionDirective(str, node as BaseDirective, element as Element);
135+
handleActionDirective(node as BaseDirective, element as Element);
136136
break;
137137
case 'Transition':
138138
handleTransitionDirective(str, node as BaseDirective, element as Element);

‎packages/svelte2tsx/src/htmlxtojsx_v2/nodes/Action.ts‎

Lines changed: 2 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,9 @@
1-
import MagicString from 'magic-string';
21
import { BaseDirective } from '../../interfaces';
3-
import {
4-
getDirectiveNameStartEndIdx,
5-
rangeWithTrailingPropertyAccess,
6-
TransformationArray
7-
} from '../utils/node-utils';
82
import { Element } from './Element';
93

104
/**
115
* use:xxx={params} ---> __sveltets_2_ensureAction(xxx(svelte.mapElementTag('ParentNodeName'),(params)));
126
*/
13-
export function handleActionDirective(
14-
str: MagicString,
15-
attr: BaseDirective,
16-
element: Element
17-
): void {
18-
const transformations: TransformationArray = [
19-
'__sveltets_2_ensureAction(',
20-
getDirectiveNameStartEndIdx(str, attr),
21-
`(${element.typingsNamespace}.mapElementTag('${element.tagName}')`
22-
];
23-
if (attr.expression) {
24-
transformations.push(
25-
',(',
26-
rangeWithTrailingPropertyAccess(str.original, attr.expression),
27-
')'
28-
);
29-
}
30-
transformations.push('));');
31-
element.appendToStartEnd(transformations);
7+
export function handleActionDirective(attr: BaseDirective, element: Element): void {
8+
element.addAction(attr);
329
}

0 commit comments

Comments
 (0)