Update SvelteKit anchor tag props

[janosh]

Closes #1680.

sveltekit:noscroll -> data-sveltekit-noscroll
sveltekit:prefetch -> data-sveltekit-prefetch
sveltekit:reload -> data-sveltekit-reload

[janosh]

Not sure how to fix the 2 failing tests. Should this

interface SvelteKitAnchorProps {
    // transformed from data-sveltekit-noscroll so it should be camel case
    dataSveltekitNoscroll?: true | undefined | null;
    dataSveltekitPrefetch?: true | undefined | null;
    dataSveltekitReload?: true | undefined | null;
}

be this?

interface SvelteKitAnchorProps {
    // transformed from data-sveltekit-noscroll so it should be camel case
    'data-sveltekit-noscroll'?: true | undefined | null;
    'data-sveltekit-prefetch'?: true | undefined | null;
    'data-sveltekit-reload'?: true | undefined | null;
}

[dummdidumm]

data-X attributes are supported in JSX, too, so it should be fine to have them unconverted/as-is.

[janosh]

Not sure how to fix this:

309 passing (7s)
  2 failing

  1) htmlx2jsx
       test/htmlx2jsx/samples/sveltekit-anchor-attrs:

      AssertionError [ERR_ASSERTION]: Expected a different output
      + expected - actual

      - { svelteHTML.createElement("a", {...__sveltets_2_empty({"data-sveltekit-noscroll":true}),}); }
      - { svelteHTML.createElement("a", {...__sveltets_2_empty({"data-sveltekit-prefetch":true}),}); }
      - { svelteHTML.createElement("a", {...__sveltets_2_empty({"data-sveltekit-reload":true}),}); }
      - { svelteHTML.createElement("a", { ...__sveltets_2_empty({"data-sveltekit-prefetch":true}),}); }
      + { svelteHTML.createElement("a", {"data-sveltekit-noscroll":true,}); }
      + { svelteHTML.createElement("a", {"data-sveltekit-prefetch":true,}); }
      + { svelteHTML.createElement("a", {"data-sveltekit-reload":true,}); }
      + { svelteHTML.createElement("a", { "data-sveltekit-prefetch":true,}); }
      
      at /home/runner/work/language-tools/language-tools/packages/svelte2tsx/test/helpers.ts:322:20
      at Context.<anonymous> (test/helpers.ts:111:17)
      at processImmediate (internal/timers.js:461:21)

  2) svelte2tsx
       test/svelte2tsx/samples/svelte-element:

      AssertionError [ERR_ASSERTION]: Expected a different output
      + expected - actual

        { svelteHTML.createElement("tag", { });}
        { svelteHTML.createElement(tag ? 'a' : 'b', {  });}
        { svelteHTML.createElement(tag, { });tag; }
        { svelteHTML.createElement(tag, {    "on:click":() => tag,});}
      - { svelteHTML.createElement('a', {    ...__sveltets_2_empty({"data-sveltekit-prefetch":true}),"href":`[https://kit.svelte.dev`](https://kit.svelte.dev%60/),});}};
      + { svelteHTML.createElement('a', {    "data-sveltekit-prefetch":true,"href":`[https://kit.svelte.dev`](https://kit.svelte.dev%60/),});}};
       return { props: {}, slots: {}, getters: {}, events: {} }}
       
       export default class Input__SvelteComponent_ extends __sveltets_1_createSvelte2TsxComponent(__sveltets_1_partial(__sveltets_1_with_any_event(render()))) {
       }
      
      at /home/runner/work/language-tools/language-tools/packages/svelte2tsx/test/helpers.ts:322:20
      at Context.<anonymous> (test/helpers.ts:111:17)

[jasonlyu123]

language-tools/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/Attribute.ts

Line 71 in 1210641

if (attr.name.startsWith('data-')) {

The __sveltets_2_empty is added here. We probably need to add an exception if we want to type-check it.

I am also wondering if we should remove the old one from SvelteKitAnchorProps. That could a problem for those still using the old version.

[janosh]

I am also wondering if we should remove the old one from SvelteKitAnchorProps. That could a problem for those still using the old version.

Seems ok to me. Breaking changes were what people using SvelteKit early signed up for.

[janosh]

We probably need to add an exception if we want to type-check it.

@jasonlyu123 Could you elaborate? Should the expected be updated?

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

Line 4 in 282df00

{ svelteHTML.createElement("a", { "sveltekit:prefetch":true,}); }

Or the actual changed?

[jasonlyu123]

The __sveltets_2_empty call is for not type check data- attribute. If you want it to be type-checked, the if statement I linked needs to be tweaked. Otherwise, you could just update the expected. I think I prefer the former, but also ok if we go with the latter.

[janosh]

Thanks for finishing @dummdidumm! 👍