(feat) add sveltekit:reload (#1431)

sveltejs/kit#4545

Refactoring new transformation along the way, removing unnecessary code

Author: dummdidumm

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: [

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 &&

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;

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 {

packages/svelte2tsx/test/htmlx2jsx/samples/sapper-noscroll/expectedv2.js

@@ -1 +1 @@
- { svelteHTML.createElement("a", {sapperNoscroll:true,}); }
+ { svelteHTML.createElement("a", {"sapper:noscroll":true,}); }

packages/svelte2tsx/test/htmlx2jsx/samples/sapper-prefetch/expectedv2.js

@@ -1 +1 @@
- { svelteHTML.createElement("a", {sapperPrefetch:true,}); }
+ { svelteHTML.createElement("a", {"sapper:prefetch":true,}); }

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

@@ -1,2 +1,3 @@
 <><a sveltekitNoscroll></a>
-<a sveltekitPrefetch></a></>
+<a sveltekitPrefetch></a>
+<a sveltekitReload></a></>

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

@@ -1,2 +1,3 @@
- { svelteHTML.createElement("a", {sveltekitNoscroll:true,}); }
- { svelteHTML.createElement("a", {sveltekitPrefetch:true,}); }
+ { svelteHTML.createElement("a", {"sveltekit:noscroll":true,}); }
+ { svelteHTML.createElement("a", {"sveltekit:prefetch":true,}); }
+ { svelteHTML.createElement("a", {"sveltekit:reload":true,}); }

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>