Skip to content

Commit 14473ea

Browse files
janoshjanosh
authored
(fix) update SvelteKit anchor tag props (#1682)
sveltekit:noscroll -> data-sveltekit-noscroll sveltekit:prefetch -> data-sveltekit-preload-code/data sveltekit:reload -> data-sveltekit-reload #1680
1 parent 35c463d commit 14473ea

File tree

11 files changed

+73
-49
lines changed

11 files changed

+73
-49
lines changed

‎packages/language-server/src/plugins/html/dataProvider.ts‎

Lines changed: 40 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,40 @@ const svelteAttributes: IAttributeData[] = [
6565
'To get a reference to a DOM node, use bind:this. If used on a component, gets a reference to that component instance.'
6666
}
6767
];
68+
const sveltekitAttributes: IAttributeData[] = [
69+
{
70+
name: 'data-sveltekit-noscroll',
71+
description:
72+
'SvelteKit-specific attribute. Will prevent scrolling after the link is clicked.',
73+
valueSet: 'v'
74+
},
75+
{
76+
name: 'data-sveltekit-preload-code',
77+
description:
78+
"SvelteKit-specific attribute. Will cause SvelteKit to run the page's load function as soon as the user hovers over the link (on a desktop) or touches it (on mobile), rather than waiting for the click event to trigger navigation.",
79+
valueSet: 'v',
80+
values: [
81+
{ name: 'eager' },
82+
{ name: 'viewport' },
83+
{ name: 'hover' },
84+
{ name: 'tap' },
85+
{ name: 'off' }
86+
]
87+
},
88+
{
89+
name: 'data-sveltekit-preload-data',
90+
description:
91+
"SvelteKit-specific attribute. Will cause SvelteKit to run the page's load function as soon as the user hovers over the link (on a desktop) or touches it (on mobile), rather than waiting for the click event to trigger navigation.",
92+
valueSet: 'v',
93+
values: [{ name: 'hover' }, { name: 'tap' }, { name: 'off' }]
94+
},
95+
{
96+
name: 'data-sveltekit-reload',
97+
description:
98+
'SvelteKit-specific attribute. Will cause SvelteKit to do a normal browser navigation which results in a full page reload.',
99+
valueSet: 'v'
100+
}
101+
];
68102

69103
const svelteTags: ITagData[] = [
70104
{
@@ -288,26 +322,6 @@ const addAttributes: Record<string, IAttributeData[]> = {
288322
textarea: [{ name: 'bind:value' }],
289323
video: [...mediaAttributes, ...videoAttributes],
290324
audio: [...mediaAttributes],
291-
a: [
292-
{
293-
name: 'sveltekit:noscroll',
294-
description:
295-
'SvelteKit-specific attribute. Will prevent scrolling after the link is clicked.',
296-
valueSet: 'v'
297-
},
298-
{
299-
name: 'sveltekit:prefetch',
300-
description:
301-
"SvelteKit-specific attribute. Will cause SvelteKit to run the page's load function as soon as the user hovers over the link (on a desktop) or touches it (on mobile), rather than waiting for the click event to trigger navigation.",
302-
valueSet: 'v'
303-
},
304-
{
305-
name: 'sveltekit:reload',
306-
description:
307-
'SvelteKit-specific attribute. Will cause SvelteKit to do a normal browser navigation which results in a full page reload.',
308-
valueSet: 'v'
309-
}
310-
],
311325
details: [
312326
{
313327
name: 'bind:open'
@@ -328,7 +342,12 @@ const html5Tags = htmlData.tags!.map((tag) => {
328342

329343
export const svelteHtmlDataProvider = newHTMLDataProvider('svelte-builtin', {
330344
version: 1,
331-
globalAttributes: [...htmlData.globalAttributes!, ...svelteEvents, ...svelteAttributes],
345+
globalAttributes: [
346+
...htmlData.globalAttributes!,
347+
...svelteEvents,
348+
...svelteAttributes,
349+
...sveltekitAttributes
350+
],
332351
tags: [...html5Tags, ...svelteTags],
333352
valueSets: htmlData.valueSets
334353
});

‎packages/svelte2tsx/src/htmlxtojsx/nodes/attribute.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import MagicString from 'magic-string';
2+
import { Attribute, BaseNode } from '../../interfaces';
23
import svgAttributes from '../svgattributes';
34
import { buildTemplateString } from '../utils/node-utils';
4-
import { Attribute, BaseNode } from '../../interfaces';
55

66
/**
77
* List taken from `svelte-jsx.d.ts` by searching for all attributes of type number
@@ -61,9 +61,10 @@ export function handleAttribute(
6161
if (parent.type == 'Element') {
6262
const sapperLinkActions = ['sapper:prefetch', 'sapper:noscroll'];
6363
const sveltekitLinkActions = [
64-
'sveltekit:prefetch',
65-
'sveltekit:noscroll',
66-
'sveltekit:reload'
64+
'data-sveltekit-preload-code',
65+
'data-sveltekit-preload-data',
66+
'data-sveltekit-noscroll',
67+
'data-sveltekit-reload'
6768
];
6869
// skip Attribute shorthand, that is handled below
6970
if (

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ export function handleAttribute(
6868
const addAttribute =
6969
element instanceof Element
7070
? (name: TransformationArray, value?: TransformationArray) => {
71-
if (attr.name.startsWith('data-')) {
71+
if (attr.name.startsWith('data-') && !attr.name.startsWith('data-sveltekit-')) {
7272
// any attribute prefixed with data- is valid, but we can't
7373
// type that statically, so we need this workaround
7474
name.unshift('...__sveltets_2_empty({');

‎packages/svelte2tsx/svelte-html-do-not-use.d.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -559,9 +559,10 @@ export interface HTMLAnchorAttributes extends HTMLAttributes<HTMLAnchorElement>
559559
referrerpolicy?: ReferrerPolicy | undefined | null;
560560

561561
// SvelteKit
562-
'sveltekit:noscroll'?: true | undefined | null;
563-
'sveltekit:prefetch'?: true | undefined | null;
564-
'sveltekit:reload'?: true | undefined | null;
562+
'data-sveltekit-noscroll'?: true | undefined | null;
563+
'data-sveltekit-preload-code'?: true | 'eager' | 'viewport' | 'hover' | 'tap' | 'off' | undefined | null;
564+
'data-sveltekit-preload-data'?: true | 'hover' | 'tap' | 'off' | undefined | null;
565+
'data-sveltekit-reload'?: true | undefined | null;
565566

566567
// Sapper
567568
'sapper:noscroll'?: true | undefined | null;

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1176,10 +1176,10 @@ declare namespace svelte.JSX {
11761176
}
11771177

11781178
interface SvelteKitAnchorProps {
1179-
// transformed from sveltekit:noscroll so it should be camel case
1180-
sveltekitNoscroll?: true | undefined | null;
1181-
sveltekitPrefetch?: true | undefined | null;
1182-
sveltekitReload?: true | undefined | null;
1179+
'data-sveltekit-noscroll'?: true | undefined | null;
1180+
'data-sveltekit-preload-code'?: true | 'eager' | 'viewport' | 'hover' | 'tap' | 'off' | undefined | null;
1181+
'data-sveltekit-preload-data'?: true | 'hover' | 'tap' | 'off' | undefined | null;
1182+
'data-sveltekit-reload'?: true | undefined | null;
11831183
}
11841184

11851185
interface SvelteMediaTimeRange {

‎packages/svelte2tsx/test/htmlx2jsx/samples/sveltekit-anchor-attrs/expected.jsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
<><a sveltekitNoscroll></a>
2-
<a sveltekitPrefetch></a>
3-
<a sveltekitReload></a>
4-
<svelteelement this="a" sveltekitPrefetch></svelteelement></>
1+
<><a data-sveltekit-noscroll></a>
2+
<a data-sveltekit-preload-code></a>
3+
<a data-sveltekit-preload-data></a>
4+
<a data-sveltekit-reload></a>
5+
<svelteelement this="a" data-sveltekit-preload-data></svelteelement></>

‎packages/svelte2tsx/test/htmlx2jsx/samples/sveltekit-anchor-attrs/expectedv2.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
{ svelteHTML.createElement("a", {"sveltekit:noscroll":true,}); }
2-
{ svelteHTML.createElement("a", {"sveltekit:prefetch":true,}); }
3-
{ svelteHTML.createElement("a", {"sveltekit:reload":true,}); }
4-
{ svelteHTML.createElement("a", { "sveltekit:prefetch":true,}); }
1+
{ svelteHTML.createElement("a", {"data-sveltekit-noscroll":true,}); }
2+
{ svelteHTML.createElement("a", {"data-sveltekit-preload-code":true,}); }
3+
{ svelteHTML.createElement("a", {"data-sveltekit-preload-data":true,}); }
4+
{ svelteHTML.createElement("a", {"data-sveltekit-reload":true,}); }
5+
{ svelteHTML.createElement("a", { "data-sveltekit-preload-data":true,}); }

‎packages/svelte2tsx/test/htmlx2jsx/samples/sveltekit-anchor-attrs/input.svelte‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
<a sveltekit:noscroll></a>
2-
<a sveltekit:prefetch></a>
3-
<a sveltekit:reload></a>
4-
<svelte:element this="a" sveltekit:prefetch></svelte:element>
1+
<a data-sveltekit-noscroll></a>
2+
<a data-sveltekit-preload-code></a>
3+
<a data-sveltekit-preload-data></a>
4+
<a data-sveltekit-reload></a>
5+
<svelte:element this="a" data-sveltekit-preload-data></svelte:element>

‎packages/svelte2tsx/test/svelte2tsx/samples/svelte-element/expected.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<svelteelement this={tag ? 'a' : 'b'} />
1111
<svelteelement this={tag}>{tag}</svelteelement>
1212
<svelteelement this={tag} onclick={() => tag} />
13-
<svelteelement this={'a'} sveltekitPrefetch href="https://kit.svelte.dev" /></>);
13+
<svelteelement this={'a'} data-sveltekit-preload-data href="https://kit.svelte.dev" /></>);
1414
return { props: /** @type {Record<string, never>} */ ({}), slots: {}, events: {} }}
1515

1616
export default class Input__SvelteComponent_ extends __sveltets_1_createSvelte2TsxComponent(__sveltets_1_partial(__sveltets_1_with_any_event(render()))) {

‎packages/svelte2tsx/test/svelte2tsx/samples/svelte-element/expectedv2.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ async () => {
1010
{ svelteHTML.createElement(tag ? 'a' : 'b', { });}
1111
{ svelteHTML.createElement(tag, { });tag; }
1212
{ svelteHTML.createElement(tag, { "on:click":() => tag,});}
13-
{ svelteHTML.createElement('a', { "sveltekit:prefetch":true,"href":`https://kit.svelte.dev`,});}};
13+
{ svelteHTML.createElement('a', { "data-sveltekit-preload-data":true,"href":`https://kit.svelte.dev`,});}};
1414
return { props: /** @type {Record<string, never>} */ ({}), slots: {}, events: {} }}
1515

1616
export default class Input__SvelteComponent_ extends __sveltets_1_createSvelte2TsxComponent(__sveltets_1_partial(__sveltets_1_with_any_event(render()))) {
17-
}
17+
}

0 commit comments

Comments
 (0)