From 2863414f3e147ae3fa90b0f1b537b8e62ef2868c Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Fri, 25 Sep 2020 19:42:59 +0200
Subject: [PATCH] (feat) support {#key} block (#571)

Also bump Svelte to 2.28.0
#570
---
 packages/language-server/package.json            |  2 +-
 packages/svelte2tsx/package.json                 |  2 +-
 packages/svelte2tsx/src/htmlxtojsx/index.ts      |  4 ++++
 packages/svelte2tsx/src/htmlxtojsx/nodes/key.ts  | 16 ++++++++++++++++
 .../htmlx2jsx/samples/key-block/expected.jsx     |  9 +++++++++
 .../htmlx2jsx/samples/key-block/input.svelte     |  9 +++++++++
 yarn.lock                                        |  8 ++++----
 7 files changed, 44 insertions(+), 6 deletions(-)
 create mode 100644 packages/svelte2tsx/src/htmlxtojsx/nodes/key.ts
 create mode 100644 packages/svelte2tsx/test/htmlx2jsx/samples/key-block/expected.jsx
 create mode 100644 packages/svelte2tsx/test/htmlx2jsx/samples/key-block/input.svelte

diff --git a/packages/language-server/package.json b/packages/language-server/package.json
index 0e866467d..f1cbd6a06 100644
--- a/packages/language-server/package.json
+++ b/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": "*",
diff --git a/packages/svelte2tsx/package.json b/packages/svelte2tsx/package.json
index 643af866f..5b674885e 100644
--- a/packages/svelte2tsx/package.json
+++ b/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"
diff --git a/packages/svelte2tsx/src/htmlxtojsx/index.ts b/packages/svelte2tsx/src/htmlxtojsx/index.ts
index 6c756a5bd..ff964822c 100644
--- a/packages/svelte2tsx/src/htmlxtojsx/index.ts
+++ b/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;
diff --git a/packages/svelte2tsx/src/htmlxtojsx/nodes/key.ts b/packages/svelte2tsx/src/htmlxtojsx/nodes/key.ts
new file mode 100644
index 000000000..89c2b8293
--- /dev/null
+++ b/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, '</>}');
+}
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/key-block/expected.jsx b/packages/svelte2tsx/test/htmlx2jsx/samples/key-block/expected.jsx
new file mode 100644
index 000000000..e07beb037
--- /dev/null
+++ b/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>
+</>}</>
\ No newline at end of file
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/key-block/input.svelte b/packages/svelte2tsx/test/htmlx2jsx/samples/key-block/input.svelte
new file mode 100644
index 000000000..adc4781b5
--- /dev/null
+++ b/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}
diff --git a/yarn.lock b/yarn.lock
index 0327b978e..81569d182 100644
--- a/yarn.lock
+++ b/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"