(feat) support {#key} block (#571)

Also bump Svelte to 2.28.0
#570

Author: dummdidumm

packages/language-server/package.json

@@ -53,7 +53,7 @@
         "prettier": "2.1.1",
         "prettier-plugin-svelte": "~1.2.1",
         "source-map": "^0.7.3",
-        "svelte": "3.25.1",
+        "svelte": "3.28.0",
         "svelte-preprocess": "~4.3.0",
         "svelte2tsx": "*",
         "typescript": "*",

packages/svelte2tsx/package.json

@@ -32,7 +32,7 @@
         "rollup-plugin-typescript": "^1.0.1",
         "source-map": "^0.6.1",
         "source-map-support": "^0.5.16",
-        "svelte": "3.25.1",
+        "svelte": "3.28.0",
         "tiny-glob": "^0.2.6",
         "tslib": "^1.10.0",
         "typescript": "^4.0.2"

packages/svelte2tsx/src/htmlxtojsx/index.ts

@@ -6,6 +6,7 @@ import { handleActionDirective } from './nodes/action-directive';
 import { handleAnimateDirective } from './nodes/animation-directive';
 import { handleAttribute } from './nodes/attribute';
 import { handleAwait } from './nodes/await';
+import { handleKey } from './nodes/key';
 import { handleBinding } from './nodes/binding';
 import { handleClassDirective } from './nodes/class-directive';
 import { handleComment } from './nodes/comment';
@@ -60,6 +61,9 @@ export function convertHtmlxToJsx(
                     case 'AwaitBlock':
                         handleAwait(htmlx, str, node);
                         break;
+                    case 'KeyBlock':
+                        handleKey(htmlx, str, node);
+                        break;
                     case 'RawMustacheTag':
                         handleRawHtml(htmlx, str, node);
                         break;

packages/svelte2tsx/src/htmlxtojsx/nodes/key.ts

@@ -0,0 +1,16 @@
+import MagicString from 'magic-string';
+import { Node } from 'estree-walker';
+
+/**
+ * {#key expr}content{/key}   --->   {expr || <>...</>}
+ */
+export function handleKey(htmlx: string, str: MagicString, keyBlock: Node): void {
+    // {#key expr}   ->   {expr || <>
+    str.overwrite(keyBlock.start, keyBlock.expression.start, '{');
+    const end = htmlx.indexOf('}', keyBlock.expression.end);
+    str.overwrite(keyBlock.expression.end, end + 1, ' || <>');
+
+    // {/key}   ->   </>}
+    const endKey = htmlx.lastIndexOf('{', keyBlock.end - 1);
+    str.overwrite(endKey, keyBlock.end, '</>}');
+}

packages/svelte2tsx/test/htmlx2jsx/samples/key-block/expected.jsx

@@ -0,0 +1,9 @@
+<>{value || <>
+    <p>hello</p>
+</>}
+{$store || <>
+    <p>hello</p>
+</>}
+{expr.obj || <>
+    <p>hello</p>
+</>}</>

packages/svelte2tsx/test/htmlx2jsx/samples/key-block/input.svelte

@@ -0,0 +1,9 @@
+{#key value}
+    <p>hello</p>
+{/key}
+{#key $store}
+    <p>hello</p>
+{/key}
+{#key expr.obj}
+    <p>hello</p>
+{/key}

yarn.lock

@@ -1975,10 +1975,10 @@ svelte-preprocess@~4.3.0:
     detect-indent "^6.0.0"
     strip-indent "^3.0.0"
 
-svelte@3.25.1:
-  version "3.25.1"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.25.1.tgz#218def1243fea5a97af6eb60f5e232315bb57ac4"
-  integrity sha512-IbrVKTmuR0BvDw4ii8/gBNy8REu7nWTRy9uhUz+Yuae5lIjWgSGwKlWtJGC2Vg95s+UnXPqDu0Kk/sUwe0t2GQ==
+svelte@3.28.0:
+  version "3.28.0"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.28.0.tgz#e257fab5666701cf230bea583ceb470bdda1344c"
+  integrity sha512-WJW8wD+aTmU5GUnTUjdhVF35mve2MjylubLgB6fGWoXHpYENdwcwWsWvjMQLayzMynqNH733h1Ck8wJzNR7gdQ==
 
 table@^5.2.3:
   version "5.4.6"