Skip to content

Commit 6a29550

Browse files
dummdidummdummdidumm
authored
(fix) relax style directive typings (#1361)
Allow numbers, too #1342
1 parent c35345a commit 6a29550

File tree

8 files changed

+63
-52
lines changed

8 files changed

+63
-52
lines changed

‎packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/style-directive/expected.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
[
22
{
33
"range": {
4-
"start": { "line": 13, "character": 11 },
5-
"end": { "line": 13, "character": 16 }
4+
"start": { "line": 14, "character": 11 },
5+
"end": { "line": 14, "character": 16 }
66
},
77
"severity": 1,
88
"source": "ts",
9-
"message": "Argument of type 'boolean' is not assignable to parameter of type 'String'.",
9+
"message": "Argument of type 'boolean' is not assignable to parameter of type 'String | Number'.",
1010
"code": 2345,
1111
"tags": []
1212
},
1313
{
1414
"range": {
15-
"start": { "line": 14, "character": 18 },
16-
"end": { "line": 14, "character": 23 }
15+
"start": { "line": 15, "character": 18 },
16+
"end": { "line": 15, "character": 23 }
1717
},
1818
"severity": 1,
1919
"source": "ts",
20-
"message": "Argument of type 'boolean' is not assignable to parameter of type 'String'.",
20+
"message": "Argument of type 'boolean' is not assignable to parameter of type 'String | Number'.",
2121
"code": 2345,
2222
"tags": []
2323
}

‎packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/style-directive/expectedv2.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
[
22
{
33
"range": {
4-
"start": { "line": 13, "character": 11 },
5-
"end": { "line": 13, "character": 16 }
4+
"start": { "line": 14, "character": 11 },
5+
"end": { "line": 14, "character": 16 }
66
},
77
"severity": 1,
88
"source": "ts",
9-
"message": "Argument of type 'boolean' is not assignable to parameter of type 'String'.",
9+
"message": "Argument of type 'boolean' is not assignable to parameter of type 'String | Number'.",
1010
"code": 2345,
1111
"tags": []
1212
},
1313
{
1414
"range": {
15-
"start": { "line": 14, "character": 18 },
16-
"end": { "line": 14, "character": 23 }
15+
"start": { "line": 15, "character": 18 },
16+
"end": { "line": 15, "character": 23 }
1717
},
1818
"severity": 1,
1919
"source": "ts",
20-
"message": "Argument of type 'boolean' is not assignable to parameter of type 'String'.",
20+
"message": "Argument of type 'boolean' is not assignable to parameter of type 'String | Number'.",
2121
"code": 2345,
2222
"tags": []
2323
}

‎packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/style-directive/input.svelte‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<!-- ok -->
77
<div style:right />
88
<div style:right={right} />
9+
<div style:right={12} />
910
<div style:right="right" />
1011
<div style:right={`right${right}`} />
1112
<div style:right=right{right} />

‎packages/svelte2tsx/src/htmlxtojsx/nodes/style-directive.ts‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,18 @@ import { StyleDirective } from '../../interfaces';
33
import { buildTemplateString } from '../utils/node-utils';
44

55
/**
6-
* style:xx ---> __sveltets_1_ensureType(String, xx);
7-
* style:xx={yy} ---> __sveltets_1_ensureType(String, yy);
8-
* style:xx="yy" ---> __sveltets_1_ensureType(String, "yy");
9-
* style:xx="a{b}" ---> __sveltets_1_ensureType(String, `a${b}`);
6+
* style:xx ---> __sveltets_1_ensureType(String, Number, xx);
7+
* style:xx={yy} ---> __sveltets_1_ensureType(String, Number, yy);
8+
* style:xx="yy" ---> __sveltets_1_ensureType(String, Number, "yy");
9+
* style:xx="a{b}" ---> __sveltets_1_ensureType(String, Number, `a${b}`);
1010
*/
1111
export function handleStyleDirective(str: MagicString, style: StyleDirective): void {
1212
const htmlx = str.original;
1313
if (style.value === true || style.value.length === 0) {
1414
str.overwrite(
1515
style.start,
1616
htmlx.indexOf(':', style.start) + 1,
17-
'{...__sveltets_1_ensureType(String, '
17+
'{...__sveltets_1_ensureType(String, Number, '
1818
);
1919
str.appendLeft(style.end, ')}');
2020
return;
@@ -25,7 +25,7 @@ export function handleStyleDirective(str: MagicString, style: StyleDirective): v
2525
style,
2626
str,
2727
htmlx,
28-
'{...__sveltets_1_ensureType(String, `',
28+
'{...__sveltets_1_ensureType(String, Number, `',
2929
'`)}',
3030
style.start
3131
);
@@ -34,15 +34,19 @@ export function handleStyleDirective(str: MagicString, style: StyleDirective): v
3434

3535
const styleVal = style.value[0];
3636
if (styleVal.type === 'Text') {
37-
str.overwrite(style.start, styleVal.start, '{...__sveltets_1_ensureType(String, "');
37+
str.overwrite(style.start, styleVal.start, '{...__sveltets_1_ensureType(String, Number, "');
3838
if (styleVal.end === style.end) {
3939
str.appendLeft(style.end, '")}');
4040
} else {
4141
str.overwrite(styleVal.end, style.end, '")}');
4242
}
4343
} else {
4444
// MustacheTag
45-
str.overwrite(style.start, styleVal.start + 1, '{...__sveltets_1_ensureType(String, ');
45+
str.overwrite(
46+
style.start,
47+
styleVal.start + 1,
48+
'{...__sveltets_1_ensureType(String, Number, '
49+
);
4650
str.overwrite(styleVal.end - 1, style.end, ')}');
4751
}
4852
}

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

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ import { StyleDirective } from '../../interfaces';
33
import { Element } from './Element';
44

55
/**
6-
* style:xx ---> __sveltets_2_ensureType(String, xx);
7-
* style:xx={yy} ---> __sveltets_2_ensureType(String, yy);
8-
* style:xx="yy" ---> __sveltets_2_ensureType(String, "yy");
9-
* style:xx="a{b}" ---> __sveltets_2_ensureType(String, `a${b}`);
6+
* style:xx ---> __sveltets_2_ensureType(String, Number, xx);
7+
* style:xx={yy} ---> __sveltets_2_ensureType(String, Number, yy);
8+
* style:xx="yy" ---> __sveltets_2_ensureType(String, Number, "yy");
9+
* style:xx="a{b}" ---> __sveltets_2_ensureType(String, Number, `a${b}`);
1010
*/
1111
export function handleStyleDirective(
1212
str: MagicString,
@@ -16,7 +16,7 @@ export function handleStyleDirective(
1616
const htmlx = str.original;
1717
if (style.value === true || style.value.length === 0) {
1818
element.appendToStartEnd([
19-
'__sveltets_2_ensureType(String, ',
19+
'__sveltets_2_ensureType(String, Number, ',
2020
[htmlx.indexOf(':', style.start) + 1, style.end],
2121
');'
2222
]);
@@ -40,7 +40,11 @@ export function handleStyleDirective(
4040
str.appendRight(n.start, '$');
4141
}
4242
}
43-
element.appendToStartEnd(['__sveltets_2_ensureType(String, `', [start, end], '`);']);
43+
element.appendToStartEnd([
44+
'__sveltets_2_ensureType(String, Number, `',
45+
[start, end],
46+
'`);'
47+
]);
4448
return;
4549
}
4650

@@ -50,12 +54,12 @@ export function handleStyleDirective(
5054
? str.original[styleVal.start - 1]
5155
: '"';
5256
element.appendToStartEnd([
53-
`__sveltets_2_ensureType(String, ${quote}`,
57+
`__sveltets_2_ensureType(String, Number, ${quote}`,
5458
[start, end],
5559
`${quote});`
5660
]);
5761
} else {
5862
// MustacheTag
59-
element.appendToStartEnd(['__sveltets_2_ensureType(String, ', [start, end], ');']);
63+
element.appendToStartEnd(['__sveltets_2_ensureType(String, Number, ', [start, end], ');']);
6064
}
6165
}

‎packages/svelte2tsx/svelte-shims.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,7 @@ declare function __sveltets_1_ensureAction(actionCall: SvelteActionReturnType):
120120
declare function __sveltets_1_ensureTransition(transitionCall: SvelteTransitionReturnType): {};
121121
declare function __sveltets_1_ensureFunction(expression: (e: Event & { detail?: any }) => unknown ): {};
122122
declare function __sveltets_1_ensureType<T>(type: AConstructorTypeOf<T>, el: T): {};
123+
declare function __sveltets_1_ensureType<T1, T2>(type1: AConstructorTypeOf<T1>, type2: AConstructorTypeOf<T2>, el: T1 | T2): {};
123124
declare function __sveltets_1_createEnsureSlot<Slots = Record<string, Record<string, any>>>(): <K1 extends keyof Slots, K2 extends keyof Slots[K1]>(k1: K1, k2: K2, val: Slots[K1][K2]) => Slots[K1][K2];
124125
declare function __sveltets_1_ensureRightProps<Props>(props: Props): {};
125126
declare function __sveltets_1_cssProp(prop: Record<string, any>): {};
@@ -253,6 +254,7 @@ type __sveltets_2_SvelteTransitionReturnType = __sveltets_2_SvelteTransitionConf
253254
declare function __sveltets_2_ensureTransition(transitionCall: __sveltets_2_SvelteTransitionReturnType): {};
254255

255256
declare function __sveltets_2_ensureType<T>(type: AConstructorTypeOf<T>, el: T): {};
257+
declare function __sveltets_2_ensureType<T1, T2>(type1: AConstructorTypeOf<T1>, type2: AConstructorTypeOf<T2>, el: T1 | T2): {};
256258

257259
declare function __sveltets_2_ensureComponent<T extends new (args: {target: any, props?: any}) => Svelte2TsxComponent<any, any, any>>(type: T): T extends never ? Svelte2TsxComponent<any, any, any> : T;
258260

‎packages/svelte2tsx/test/htmlx2jsx/samples/style-directive/expected.jsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
<><div {...__sveltets_1_ensureType(String, shorthand)}>Hello</div>
2-
<div {...__sveltets_1_ensureType(String, value)}>Hello</div>
3-
<div {...__sveltets_1_ensureType(String, value)}>Hello</div>
4-
<div {...__sveltets_1_ensureType(String, value)}>Hello</div>
5-
<div {...__sveltets_1_ensureType(String, "string")}>Hello</div>
6-
<div {...__sveltets_1_ensureType(String, "string")}>Hello</div>
7-
<div {...__sveltets_1_ensureType(String, `string${mixed}`)}>Hello</div>
8-
<div {...__sveltets_1_ensureType(String, `string${mixed}`)}>Hello</div>
9-
<div {...__sveltets_1_ensureType(String, `${mixed}string`)}>Hello</div>
10-
<div {...__sveltets_1_ensureType(String, `string${mixed}string`)}>Hello</div>
11-
<div {...__sveltets_1_ensureType(String, `template${literal}`)}>Hello</div>
1+
<><div {...__sveltets_1_ensureType(String, Number, shorthand)}>Hello</div>
2+
<div {...__sveltets_1_ensureType(String, Number, value)}>Hello</div>
3+
<div {...__sveltets_1_ensureType(String, Number, value)}>Hello</div>
4+
<div {...__sveltets_1_ensureType(String, Number, value)}>Hello</div>
5+
<div {...__sveltets_1_ensureType(String, Number, "string")}>Hello</div>
6+
<div {...__sveltets_1_ensureType(String, Number, "string")}>Hello</div>
7+
<div {...__sveltets_1_ensureType(String, Number, `string${mixed}`)}>Hello</div>
8+
<div {...__sveltets_1_ensureType(String, Number, `string${mixed}`)}>Hello</div>
9+
<div {...__sveltets_1_ensureType(String, Number, `${mixed}string`)}>Hello</div>
10+
<div {...__sveltets_1_ensureType(String, Number, `string${mixed}string`)}>Hello</div>
11+
<div {...__sveltets_1_ensureType(String, Number, `template${literal}`)}>Hello</div>
1212

13-
<div {...__sveltets_1_ensureType(String, shorthand)} /></>
13+
<div {...__sveltets_1_ensureType(String, Number, shorthand)} /></>

‎packages/svelte2tsx/test/htmlx2jsx/samples/style-directive/expectedv2.js‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
{ svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, shorthand); }
2-
{ svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, value); }
3-
{ svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, value); }
4-
{ svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, value); }
5-
{ svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, " "); }
6-
{ svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, " "); }
7-
{ svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, ` $mixed`); }
8-
{ svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, ` $mixed`); }
9-
{ svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, `mixed; `); }
10-
{ svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, ` $mixed; `); }
11-
{ svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, `template${literal}`); }
1+
{ svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, Number, shorthand); }
2+
{ svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, Number, value); }
3+
{ svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, Number, value); }
4+
{ svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, Number, value); }
5+
{ svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, Number, " "); }
6+
{ svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, Number, " "); }
7+
{ svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, Number, ` $mixed`); }
8+
{ svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, Number, ` $mixed`); }
9+
{ svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, Number, `mixed; `); }
10+
{ svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, Number, ` $mixed; `); }
11+
{ svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, Number, `template${literal}`); }
1212

13-
{ svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, shorthand);}
13+
{ svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, Number, shorthand);}

0 commit comments

Comments
 (0)