Skip to content

Commit 80e5cba

Browse files
dummdidummdummdidumm
authored
breaking: make ready for Svelte 4 (#2030)
- adjust peer deps where necessary - breaking change: for Svelte 4, the deprecated svelte.JSX typings are removed by introducing a new -v4 version of shims/jsx where these are left out. this has no effect on Svelte 3 - temporary: fix tests to not depend on svelte imports because they are esm only, and tests use cjs. in the long run replace the test runner with vitest
1 parent 6dff040 commit 80e5cba

File tree

15 files changed

+501
-28
lines changed

15 files changed

+501
-28
lines changed

‎packages/language-server/src/plugins/typescript/service.ts‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { dirname, resolve } from 'path';
22
import ts from 'typescript';
33
import { TextDocumentContentChangeEvent } from 'vscode-languageserver-protocol';
4-
import { getPackageInfo } from '../../importPackage';
4+
import { getPackageInfo, importSvelte } from '../../importPackage';
55
import { Document } from '../../lib/documents';
66
import { configLoader } from '../../lib/documents/configLoader';
77
import { FileMap, FileSet } from '../../lib/documents/fileCollection';
@@ -201,11 +201,12 @@ async function createLanguageService(
201201
// Fall back to dirname
202202
svelteTsPath = __dirname;
203203
}
204-
const svelteTsxFiles = [
205-
'./svelte-shims.d.ts',
206-
'./svelte-jsx.d.ts',
207-
'./svelte-native-jsx.d.ts'
208-
].map((f) => tsSystem.resolvePath(resolve(svelteTsPath, f)));
204+
const VERSION = importSvelte(tsconfigPath || workspacePath).VERSION;
205+
const svelteTsxFiles = (
206+
VERSION.split('.')[0] === '3'
207+
? ['./svelte-shims.d.ts', './svelte-jsx.d.ts', './svelte-native-jsx.d.ts']
208+
: ['./svelte-shims-v4.d.ts', './svelte-jsx-v4.d.ts', './svelte-native-jsx.d.ts']
209+
).map((f) => tsSystem.resolvePath(resolve(svelteTsPath, f)));
209210

210211
let languageServiceReducedMode = false;
211212
let projectVersion = 0;

‎packages/language-server/test/plugins/typescript/testfiles/code-actions/importing/a.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
import { writable } from 'svelte/store';
1+
import type { Writable } from 'svelte/store';
22

3-
export const someStore = writable(1);
3+
export const someStore = null as any as Writable<number>;

‎packages/language-server/test/plugins/typescript/testfiles/code-actions/importing/b.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { readable, writable } from 'svelte/store';
1+
import type { Readable, Writable } from 'svelte/store';
22

3-
export const someStore = readable(1);
4-
export const someOtherStore = writable(1);
3+
export const someStore = null as any as Readable<number>;
4+
export const someOtherStore = null as any as Writable<number>;

‎packages/language-server/test/plugins/typescript/testfiles/code-actions/importing/c.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1-
import { SvelteComponentTyped } from 'svelte';
1+
import type { SvelteComponentTyped as tmp } from 'svelte';
2+
3+
const SvelteComponentTyped: typeof tmp = null as any;
24

35
export class FixAllImported3 extends SvelteComponentTyped {}

‎packages/language-server/test/plugins/typescript/testfiles/completions/ComponentDef.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
/// <reference lib="dom" />
2-
import { SvelteComponentTyped } from 'svelte';
2+
import type { SvelteComponentTyped as tmp } from 'svelte';
3+
4+
const SvelteComponentTyped: typeof tmp = null as any;
35

46
export class ComponentDef extends SvelteComponentTyped<
57
{},

‎packages/language-server/test/plugins/typescript/testfiles/completions/to-import.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { writable } from 'svelte/store';
1+
import type { Writable } from 'svelte/store';
22

33
export class ScndImport {}
44

5-
export const store = writable('');
5+
export const store = null as any as Writable<number>;

‎packages/svelte-check/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
"typescript": "^5.0.3"
3434
},
3535
"peerDependencies": {
36-
"svelte": "^3.55.0"
36+
"svelte": "^3.55.0 || ^4.0.0"
3737
},
3838
"scripts": {
3939
"build": "rollup -c && node ./dist/src/index.js --workspace ./test --tsconfig ./tsconfig.json",

‎packages/svelte2tsx/package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
"typescript": "^5.0.3"
4444
},
4545
"peerDependencies": {
46-
"svelte": "^3.55",
46+
"svelte": "^3.55 || ^4.0",
4747
"typescript": "^4.9.4 || ^5.0.0"
4848
},
4949
"scripts": {
@@ -59,9 +59,10 @@
5959
"README.md",
6060
"LICENSE",
6161
"svelte-jsx.d.ts",
62+
"svelte-jsx-v4.d.ts",
6263
"svelte-native-jsx.d.ts",
6364
"svelte-shims.d.ts",
64-
"svelte-html-do-not-use.d.ts"
65+
"svelte-shims-v4.d.ts"
6566
],
6667
"dependencies": {
6768
"dedent-js": "^1.0.1",

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -425,6 +425,7 @@ export function svelte2tsx(
425425
// Prepend the import which is used for TS files
426426
// The other shims need to be provided by the user ambient-style,
427427
// for example through filenames.push(require.resolve('svelte2tsx/svelte-shims.d.ts'))
428+
// TODO replace with SvelteComponent for Svelte 5, keep old for backwards compatibility with Svelte 3
428429
str.prepend('import { SvelteComponentTyped } from "svelte"\n' + '\n');
429430
let code = str.toString();
430431
// Remove all tsx occurences and the template part from the output

‎packages/svelte2tsx/svelte-jsx-v4.d.ts‎

Lines changed: 229 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,229 @@
1+
/// <reference lib="dom" />
2+
3+
declare namespace svelteHTML {
4+
5+
// Every namespace eligible for use needs to implement the following two functions
6+
/**
7+
* @internal do not use
8+
*/
9+
function mapElementTag<K extends keyof ElementTagNameMap>(
10+
tag: K
11+
): ElementTagNameMap[K];
12+
function mapElementTag<K extends keyof SVGElementTagNameMap>(
13+
tag: K
14+
): SVGElementTagNameMap[K];
15+
function mapElementTag(
16+
tag: any
17+
): any; // needs to be any because used in context of <svelte:element>
18+
19+
/**
20+
* @internal do not use
21+
*/
22+
function createElement<Elements extends IntrinsicElements, Key extends keyof Elements>(
23+
// "undefined | null" because of <svelte:element>
24+
element: Key | undefined | null, attrs: string extends Key ? import('svelte/elements').HTMLAttributes<any> : Elements[Key]
25+
): Key extends keyof ElementTagNameMap ? ElementTagNameMap[Key] : Key extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[Key] : any;
26+
function createElement<Elements extends IntrinsicElements, Key extends keyof Elements, T>(
27+
// "undefined | null" because of <svelte:element>
28+
element: Key | undefined | null, attrsEnhancers: T, attrs: (string extends Key ? import('svelte/elements').HTMLAttributes<any> : Elements[Key]) & T
29+
): Key extends keyof ElementTagNameMap ? ElementTagNameMap[Key] : Key extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[Key] : any;
30+
31+
// For backwards-compatibility and ease-of-use, in case someone enhanced the typings from import('svelte/elements').HTMLAttributes/SVGAttributes
32+
interface HTMLAttributes<T extends EventTarget = any> {}
33+
interface SVGAttributes<T extends EventTarget = any> {}
34+
35+
/**
36+
* @internal do not use
37+
*/
38+
type HTMLProps<Property extends string, Override> =
39+
Omit<import('svelte/elements').SvelteHTMLElements[Property], keyof Override> & Override;
40+
41+
interface IntrinsicElements {
42+
a: HTMLProps<'a', HTMLAttributes>;
43+
abbr: HTMLProps<'abbr', HTMLAttributes>;
44+
address: HTMLProps<'address', HTMLAttributes>;
45+
area: HTMLProps<'area', HTMLAttributes>;
46+
article: HTMLProps<'article', HTMLAttributes>;
47+
aside: HTMLProps<'aside', HTMLAttributes>;
48+
audio: HTMLProps<'audio', HTMLAttributes>;
49+
b: HTMLProps<'b', HTMLAttributes>;
50+
base: HTMLProps<'base', HTMLAttributes>;
51+
bdi: HTMLProps<'bdi', HTMLAttributes>;
52+
bdo: HTMLProps<'bdo', HTMLAttributes>;
53+
big: HTMLProps<'big', HTMLAttributes>;
54+
blockquote: HTMLProps<'blockquote', HTMLAttributes>;
55+
body: HTMLProps<'body', HTMLAttributes>;
56+
br: HTMLProps<'br', HTMLAttributes>;
57+
button: HTMLProps<'button', HTMLAttributes>;
58+
canvas: HTMLProps<'canvas', HTMLAttributes>;
59+
caption: HTMLProps<'caption', HTMLAttributes>;
60+
cite: HTMLProps<'cite', HTMLAttributes>;
61+
code: HTMLProps<'code', HTMLAttributes>;
62+
col: HTMLProps<'col', HTMLAttributes>;
63+
colgroup: HTMLProps<'colgroup', HTMLAttributes>;
64+
data: HTMLProps<'data', HTMLAttributes>;
65+
datalist: HTMLProps<'datalist', HTMLAttributes>;
66+
dd: HTMLProps<'dd', HTMLAttributes>;
67+
del: HTMLProps<'del', HTMLAttributes>;
68+
details: HTMLProps<'details', HTMLAttributes>;
69+
dfn: HTMLProps<'dfn', HTMLAttributes>;
70+
dialog: HTMLProps<'dialog', HTMLAttributes>;
71+
div: HTMLProps<'div', HTMLAttributes>;
72+
dl: HTMLProps<'dl', HTMLAttributes>;
73+
dt: HTMLProps<'dt', HTMLAttributes>;
74+
em: HTMLProps<'em', HTMLAttributes>;
75+
embed: HTMLProps<'embed', HTMLAttributes>;
76+
fieldset: HTMLProps<'fieldset', HTMLAttributes>;
77+
figcaption: HTMLProps<'figcaption', HTMLAttributes>;
78+
figure: HTMLProps<'figure', HTMLAttributes>;
79+
footer: HTMLProps<'footer', HTMLAttributes>;
80+
form: HTMLProps<'form', HTMLAttributes>;
81+
h1: HTMLProps<'h1', HTMLAttributes>;
82+
h2: HTMLProps<'h2', HTMLAttributes>;
83+
h3: HTMLProps<'h3', HTMLAttributes>;
84+
h4: HTMLProps<'h4', HTMLAttributes>;
85+
h5: HTMLProps<'h5', HTMLAttributes>;
86+
h6: HTMLProps<'h6', HTMLAttributes>;
87+
head: HTMLProps<'head', HTMLAttributes>;
88+
header: HTMLProps<'header', HTMLAttributes>;
89+
hgroup: HTMLProps<'hgroup', HTMLAttributes>;
90+
hr: HTMLProps<'hr', HTMLAttributes>;
91+
html: HTMLProps<'html', HTMLAttributes>;
92+
i: HTMLProps<'i', HTMLAttributes>;
93+
iframe: HTMLProps<'iframe', HTMLAttributes>;
94+
img: HTMLProps<'img', HTMLAttributes>;
95+
input: HTMLProps<'input', HTMLAttributes>;
96+
ins: HTMLProps<'ins', HTMLAttributes>;
97+
kbd: HTMLProps<'kbd', HTMLAttributes>;
98+
keygen: HTMLProps<'keygen', HTMLAttributes>;
99+
label: HTMLProps<'label', HTMLAttributes>;
100+
legend: HTMLProps<'legend', HTMLAttributes>;
101+
li: HTMLProps<'li', HTMLAttributes>;
102+
link: HTMLProps<'link', HTMLAttributes>;
103+
main: HTMLProps<'main', HTMLAttributes>;
104+
map: HTMLProps<'map', HTMLAttributes>;
105+
mark: HTMLProps<'mark', HTMLAttributes>;
106+
menu: HTMLProps<'menu', HTMLAttributes>;
107+
menuitem: HTMLProps<'menuitem', HTMLAttributes>;
108+
meta: HTMLProps<'meta', HTMLAttributes>;
109+
meter: HTMLProps<'meter', HTMLAttributes>;
110+
nav: HTMLProps<'nav', HTMLAttributes>;
111+
noscript: HTMLProps<'noscript', HTMLAttributes>;
112+
object: HTMLProps<'object', HTMLAttributes>;
113+
ol: HTMLProps<'ol', HTMLAttributes>;
114+
optgroup: HTMLProps<'optgroup', HTMLAttributes>;
115+
option: HTMLProps<'option', HTMLAttributes>;
116+
output: HTMLProps<'output', HTMLAttributes>;
117+
p: HTMLProps<'p', HTMLAttributes>;
118+
param: HTMLProps<'param', HTMLAttributes>;
119+
picture: HTMLProps<'picture', HTMLAttributes>;
120+
pre: HTMLProps<'pre', HTMLAttributes>;
121+
progress: HTMLProps<'progress', HTMLAttributes>;
122+
q: HTMLProps<'q', HTMLAttributes>;
123+
rp: HTMLProps<'rp', HTMLAttributes>;
124+
rt: HTMLProps<'rt', HTMLAttributes>;
125+
ruby: HTMLProps<'ruby', HTMLAttributes>;
126+
s: HTMLProps<'s', HTMLAttributes>;
127+
samp: HTMLProps<'samp', HTMLAttributes>;
128+
slot: HTMLProps<'slot', HTMLAttributes>;
129+
script: HTMLProps<'script', HTMLAttributes>;
130+
section: HTMLProps<'section', HTMLAttributes>;
131+
select: HTMLProps<'select', HTMLAttributes>;
132+
small: HTMLProps<'small', HTMLAttributes>;
133+
source: HTMLProps<'source', HTMLAttributes>;
134+
span: HTMLProps<'span', HTMLAttributes>;
135+
strong: HTMLProps<'strong', HTMLAttributes>;
136+
style: HTMLProps<'style', HTMLAttributes>;
137+
sub: HTMLProps<'sub', HTMLAttributes>;
138+
summary: HTMLProps<'summary', HTMLAttributes>;
139+
sup: HTMLProps<'sup', HTMLAttributes>;
140+
table: HTMLProps<'table', HTMLAttributes>;
141+
template: HTMLProps<'template', HTMLAttributes>;
142+
tbody: HTMLProps<'tbody', HTMLAttributes>;
143+
td: HTMLProps<'td', HTMLAttributes>;
144+
textarea: HTMLProps<'textarea', HTMLAttributes>;
145+
tfoot: HTMLProps<'tfoot', HTMLAttributes>;
146+
th: HTMLProps<'th', HTMLAttributes>;
147+
thead: HTMLProps<'thead', HTMLAttributes>;
148+
time: HTMLProps<'time', HTMLAttributes>;
149+
title: HTMLProps<'title', HTMLAttributes>;
150+
tr: HTMLProps<'tr', HTMLAttributes>;
151+
track: HTMLProps<'track', HTMLAttributes>;
152+
u: HTMLProps<'u', HTMLAttributes>;
153+
ul: HTMLProps<'ul', HTMLAttributes>;
154+
var: HTMLProps<'var', HTMLAttributes>;
155+
video: HTMLProps<'video', HTMLAttributes>;
156+
wbr: HTMLProps<'wbr', HTMLAttributes>;
157+
webview: HTMLProps<'webview', HTMLAttributes>;
158+
// SVG
159+
svg: HTMLProps<'svg', SVGAttributes>;
160+
161+
animate: HTMLProps<'animate', SVGAttributes>;
162+
animateMotion: HTMLProps<'animateMotion', SVGAttributes>;
163+
animateTransform: HTMLProps<'animateTransform', SVGAttributes>;
164+
circle: HTMLProps<'circle', SVGAttributes>;
165+
clipPath: HTMLProps<'clipPath', SVGAttributes>;
166+
defs: HTMLProps<'defs', SVGAttributes>;
167+
desc: HTMLProps<'desc', SVGAttributes>;
168+
ellipse: HTMLProps<'ellipse', SVGAttributes>;
169+
feBlend: HTMLProps<'feBlend', SVGAttributes>;
170+
feColorMatrix: HTMLProps<'feColorMatrix', SVGAttributes>;
171+
feComponentTransfer: HTMLProps<'feComponentTransfer', SVGAttributes>;
172+
feComposite: HTMLProps<'feComposite', SVGAttributes>;
173+
feConvolveMatrix: HTMLProps<'feConvolveMatrix', SVGAttributes>;
174+
feDiffuseLighting: HTMLProps<'feDiffuseLighting', SVGAttributes>;
175+
feDisplacementMap: HTMLProps<'feDisplacementMap', SVGAttributes>;
176+
feDistantLight: HTMLProps<'feDistantLight', SVGAttributes>;
177+
feDropShadow: HTMLProps<'feDropShadow', SVGAttributes>;
178+
feFlood: HTMLProps<'feFlood', SVGAttributes>;
179+
feFuncA: HTMLProps<'feFuncA', SVGAttributes>;
180+
feFuncB: HTMLProps<'feFuncB', SVGAttributes>;
181+
feFuncG: HTMLProps<'feFuncG', SVGAttributes>;
182+
feFuncR: HTMLProps<'feFuncR', SVGAttributes>;
183+
feGaussianBlur: HTMLProps<'feGaussianBlur', SVGAttributes>;
184+
feImage: HTMLProps<'feImage', SVGAttributes>;
185+
feMerge: HTMLProps<'feMerge', SVGAttributes>;
186+
feMergeNode: HTMLProps<'feMergeNode', SVGAttributes>;
187+
feMorphology: HTMLProps<'feMorphology', SVGAttributes>;
188+
feOffset: HTMLProps<'feOffset', SVGAttributes>;
189+
fePointLight: HTMLProps<'fePointLight', SVGAttributes>;
190+
feSpecularLighting: HTMLProps<'feSpecularLighting', SVGAttributes>;
191+
feSpotLight: HTMLProps<'feSpotLight', SVGAttributes>;
192+
feTile: HTMLProps<'feTile', SVGAttributes>;
193+
feTurbulence: HTMLProps<'feTurbulence', SVGAttributes>;
194+
filter: HTMLProps<'filter', SVGAttributes>;
195+
foreignObject: HTMLProps<'foreignObject', SVGAttributes>;
196+
g: HTMLProps<'g', SVGAttributes>;
197+
image: HTMLProps<'image', SVGAttributes>;
198+
line: HTMLProps<'line', SVGAttributes>;
199+
linearGradient: HTMLProps<'linearGradient', SVGAttributes>;
200+
marker: HTMLProps<'marker', SVGAttributes>;
201+
mask: HTMLProps<'mask', SVGAttributes>;
202+
metadata: HTMLProps<'metadata', SVGAttributes>;
203+
mpath: HTMLProps<'mpath', SVGAttributes>;
204+
path: HTMLProps<'path', SVGAttributes>;
205+
pattern: HTMLProps<'pattern', SVGAttributes>;
206+
polygon: HTMLProps<'polygon', SVGAttributes>;
207+
polyline: HTMLProps<'polyline', SVGAttributes>;
208+
radialGradient: HTMLProps<'radialGradient', SVGAttributes>;
209+
rect: HTMLProps<'rect', SVGAttributes>;
210+
stop: HTMLProps<'stop', SVGAttributes>;
211+
switch: HTMLProps<'switch', SVGAttributes>;
212+
symbol: HTMLProps<'symbol', SVGAttributes>;
213+
text: HTMLProps<'text', SVGAttributes>;
214+
textPath: HTMLProps<'textPath', SVGAttributes>;
215+
tspan: HTMLProps<'tspan', SVGAttributes>;
216+
use: HTMLProps<'use', SVGAttributes>;
217+
view: HTMLProps<'view', SVGAttributes>;
218+
219+
// Svelte specific
220+
'svelte:window': HTMLProps<'svelte:window', HTMLAttributes>;
221+
'svelte:body': HTMLProps<'svelte:body', HTMLAttributes>;
222+
'svelte:fragment': { slot?: string };
223+
'svelte:options': { [name: string]: any };
224+
'svelte:head': { [name: string]: any };
225+
226+
[name: string]: { [name: string]: any };
227+
}
228+
229+
}

0 commit comments

Comments
 (0)