Repository: sveltejs/language-tools
Pull request #1431 (2022-04-07 15:30:50)

(feat) add sveltekit:reload
https://github.com/sveltejs/kit/pull/4545

Refactoring new transformation along the way, removing unnecessary code


Patch:
diff --git a/packages/language-server/src/plugins/html/dataProvider.ts b/packages/language-server/src/plugins/html/dataProvider.ts
index d42368e3..e515b1e3 100644
--- a/packages/language-server/src/plugins/html/dataProvider.ts
+++ b/packages/language-server/src/plugins/html/dataProvider.ts
@@ -288,6 +288,12 @@ const addAttributes: Record<string, IAttributeData[]> = {
             description:
                 "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.",
             valueSet: 'v'
+        },
+        {
+            name: 'sveltekit:reload',
+            description:
+                'SvelteKit-specific attribute. Will cause SvelteKit to do a normal browser navigation which results in a full page reload.',
+            valueSet: 'v'
         }
     ],
     details: [
diff --git a/packages/svelte2tsx/src/htmlxtojsx/nodes/attribute.ts b/packages/svelte2tsx/src/htmlxtojsx/nodes/attribute.ts
index 68533b95..fc3ad030 100644
--- a/packages/svelte2tsx/src/htmlxtojsx/nodes/attribute.ts
+++ b/packages/svelte2tsx/src/htmlxtojsx/nodes/attribute.ts
@@ -60,7 +60,11 @@ export function handleAttribute(
     //if we are on an "element" we are case insensitive, lowercase to match our JSX
     if (parent.type == 'Element') {
         const sapperLinkActions = ['sapper:prefetch', 'sapper:noscroll'];
-        const sveltekitLinkActions = ['sveltekit:prefetch', 'sveltekit:noscroll'];
+        const sveltekitLinkActions = [
+            'sveltekit:prefetch',
+            'sveltekit:noscroll',
+            'sveltekit:reload'
+        ];
         // skip Attribute shorthand, that is handled below
         if (
             (attr.value !== true &&
diff --git a/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/Attribute.ts b/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/Attribute.ts
index ab5202dd..15881f83 100644
--- a/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/Attribute.ts
+++ b/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/Attribute.ts
@@ -29,8 +29,6 @@ const numberOnlyAttributes = new Set([
     'results',
     'volume'
 ]);
-const sapperLinkActions = ['sapper:prefetch', 'sapper:noscroll'];
-const sveltekitLinkActions = ['sveltekit:prefetch', 'sveltekit:noscroll'];
 
 /**
  * Handle various kinds of attributes and make them conform to being valid in context of a object definition
@@ -109,13 +107,7 @@ export function handleAttribute(
 
     const attributeName: TransformationArray = [];
 
-    if (sapperLinkActions.includes(attr.name) || sveltekitLinkActions.includes(attr.name)) {
-        //strip ":" from out attribute name and uppercase the next letter to convert to jsx attribute
-        const parts = attr.name.split(':');
-        const name = parts[0] + parts[1][0].toUpperCase() + parts[1].substring(1);
-        str.overwrite(attr.start, attr.start + attr.name.length, name);
-        attributeName.push([attr.start, attr.start + attr.name.length]);
-    } else if (attributeValueIsOfType(attr.value, 'AttributeShorthand')) {
+    if (attributeValueIsOfType(attr.value, 'AttributeShorthand')) {
         // For the attribute shorthand, the name will be the mapped part
         addAttribute([[attr.value[0].start, attr.value[0].end]]);
         return;
diff --git a/packages/svelte2tsx/svelte-jsx.d.ts b/packages/svelte2tsx/svelte-jsx.d.ts
index fbaf4ce0..92655d15 100644
--- a/packages/svelte2tsx/svelte-jsx.d.ts
+++ b/packages/svelte2tsx/svelte-jsx.d.ts
@@ -98,11 +98,16 @@ declare namespace svelteHTML {
   // eslint-disable-next-line @typescript-eslint/no-empty-interface
   interface SvelteWindowProps extends svelte.JSX.SvelteWindowProps {}
   
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
-  interface SapperAnchorProps extends svelte.JSX.SapperAnchorProps {}
-  
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
-  interface SvelteKitAnchorProps extends svelte.JSX.SvelteKitAnchorProps {}
+  interface SapperAnchorProps {
+    "sapper:noscroll"?: true | undefined | null;
+    "sapper:prefetch"?: true | undefined | null;
+  }
+
+  interface SvelteKitAnchorProps {
+    "sveltekit:noscroll"?: true | undefined | null;
+    "sveltekit:prefetch"?: true | undefined | null;
+    "sveltekit:reload"?: true | undefined | null;
+  }
   
   // eslint-disable-next-line @typescript-eslint/no-empty-interface
   interface SvelteMediaTimeRange extends svelte.JSX.SvelteMediaTimeRange {}
@@ -1230,6 +1235,7 @@ declare namespace svelte.JSX {
         // transformed from sveltekit:noscroll so it should be camel case
         sveltekitNoscroll?: true | undefined | null;
         sveltekitPrefetch?: true | undefined | null;
+        sveltekitReload?: true | undefined | null;
     }
 
     interface SvelteMediaTimeRange {


Test patch:
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/sapper-noscroll/expectedv2.js b/packages/svelte2tsx/test/htmlx2jsx/samples/sapper-noscroll/expectedv2.js
index 10bce5f1..4d6403e5 100644
--- a/packages/svelte2tsx/test/htmlx2jsx/samples/sapper-noscroll/expectedv2.js
+++ b/packages/svelte2tsx/test/htmlx2jsx/samples/sapper-noscroll/expectedv2.js
@@ -1,1 +1,1 @@
- { svelteHTML.createElement("a", {sapperNoscroll:true,}); }
\ No newline at end of file
+ { svelteHTML.createElement("a", {"sapper:noscroll":true,}); }
\ No newline at end of file
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/sapper-prefetch/expectedv2.js b/packages/svelte2tsx/test/htmlx2jsx/samples/sapper-prefetch/expectedv2.js
index 76f68ef5..20901d7b 100644
--- a/packages/svelte2tsx/test/htmlx2jsx/samples/sapper-prefetch/expectedv2.js
+++ b/packages/svelte2tsx/test/htmlx2jsx/samples/sapper-prefetch/expectedv2.js
@@ -1,1 +1,1 @@
- { svelteHTML.createElement("a", {sapperPrefetch:true,}); }
\ No newline at end of file
+ { svelteHTML.createElement("a", {"sapper:prefetch":true,}); }
\ No newline at end of file
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/sveltekit-anchor-attrs/expected.jsx b/packages/svelte2tsx/test/htmlx2jsx/samples/sveltekit-anchor-attrs/expected.jsx
index 7efc257d..0f023660 100644
--- a/packages/svelte2tsx/test/htmlx2jsx/samples/sveltekit-anchor-attrs/expected.jsx
+++ b/packages/svelte2tsx/test/htmlx2jsx/samples/sveltekit-anchor-attrs/expected.jsx
@@ -1,2 +1,3 @@
 <><a sveltekitNoscroll></a>
-<a sveltekitPrefetch></a></>
\ No newline at end of file
+<a sveltekitPrefetch></a>
+<a sveltekitReload></a></>
\ No newline at end of file
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/sveltekit-anchor-attrs/expectedv2.js b/packages/svelte2tsx/test/htmlx2jsx/samples/sveltekit-anchor-attrs/expectedv2.js
index 6b1fe849..d4478cda 100644
--- a/packages/svelte2tsx/test/htmlx2jsx/samples/sveltekit-anchor-attrs/expectedv2.js
+++ b/packages/svelte2tsx/test/htmlx2jsx/samples/sveltekit-anchor-attrs/expectedv2.js
@@ -1,2 +1,3 @@
- { svelteHTML.createElement("a", {sveltekitNoscroll:true,}); }
- { svelteHTML.createElement("a", {sveltekitPrefetch:true,}); }
\ No newline at end of file
+ { svelteHTML.createElement("a", {"sveltekit:noscroll":true,}); }
+ { svelteHTML.createElement("a", {"sveltekit:prefetch":true,}); }
+ { svelteHTML.createElement("a", {"sveltekit:reload":true,}); }
\ No newline at end of file
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/sveltekit-anchor-attrs/input.svelte b/packages/svelte2tsx/test/htmlx2jsx/samples/sveltekit-anchor-attrs/input.svelte
index 53cb1612..7e888c35 100644
--- a/packages/svelte2tsx/test/htmlx2jsx/samples/sveltekit-anchor-attrs/input.svelte
+++ b/packages/svelte2tsx/test/htmlx2jsx/samples/sveltekit-anchor-attrs/input.svelte
@@ -1,2 +1,3 @@
 <a sveltekit:noscroll></a>
 <a sveltekit:prefetch></a>
+<a sveltekit:reload></a>