From 048e467d45af47fd11f75c2e8f2c2e531e54d4d8 Mon Sep 17 00:00:00 2001
From: "Lyu, Wei-Da" <36730922+jasonlyu123@users.noreply.github.com>
Date: Tue, 1 Sep 2020 13:58:47 +0800
Subject: [PATCH] (fix) (svelte2tsx) also transform element true attribute to
 lowercase (#511)

* also transform element true attribute to lowercase
    ex: <input readonly>

* don't transform if attribute is transformed from directive and namespace
---
 packages/svelte2tsx/src/htmlxtojsx/index.ts     | 17 +++++++++++++++--
 .../samples/attribute-element/expected.jsx      |  3 +++
 .../samples/attribute-element/input.svelte      |  3 +++
 3 files changed, 21 insertions(+), 2 deletions(-)
 create mode 100644 packages/svelte2tsx/test/htmlx2jsx/samples/attribute-element/expected.jsx
 create mode 100644 packages/svelte2tsx/test/htmlx2jsx/samples/attribute-element/input.svelte

diff --git a/packages/svelte2tsx/src/htmlxtojsx/index.ts b/packages/svelte2tsx/src/htmlxtojsx/index.ts
index b9fe8592a..0b8a99dd5 100644
--- a/packages/svelte2tsx/src/htmlxtojsx/index.ts
+++ b/packages/svelte2tsx/src/htmlxtojsx/index.ts
@@ -354,10 +354,12 @@ export function convertHtmlxToJsx(
     };
 
     const handleAttribute = (attr: Node, parent: Node) => {
+        let transformedFromDirectiveOrNamespace = false;
+
         //if we are on an "element" we are case insensitive, lowercase to match our JSX
         if (parent.type == 'Element') {
-            //skip Attribute shorthand, that is handled below
             const sapperNoScroll = attr.name === 'sapper:noscroll';
+            //skip Attribute shorthand, that is handled below
             if (
                 (attr.value !== true &&
                     !(
@@ -380,11 +382,22 @@ export function convertHtmlxToJsx(
                 }
 
                 str.overwrite(attr.start, attr.start + attr.name.length, name);
+
+                transformedFromDirectiveOrNamespace = true;
             }
         }
 
         //we are a bare attribute
-        if (attr.value === true) return;
+        if (attr.value === true) {
+            if (
+                parent.type === 'Element' &&
+                !transformedFromDirectiveOrNamespace &&
+                parent.name !== '!DOCTYPE'
+            ) {
+                str.overwrite(attr.start, attr.end, attr.name.toLowerCase());
+            }
+            return;
+        }
 
         if (attr.value.length == 0) return; //wut?
         //handle single value
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/attribute-element/expected.jsx b/packages/svelte2tsx/test/htmlx2jsx/samples/attribute-element/expected.jsx
new file mode 100644
index 000000000..9bf9bebd7
--- /dev/null
+++ b/packages/svelte2tsx/test/htmlx2jsx/samples/attribute-element/expected.jsx
@@ -0,0 +1,3 @@
+<><div contenteditable></div>
+<div contenteditable={contentEditable}></div>
+<div contenteditable={contenteditable}></div></>
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/attribute-element/input.svelte b/packages/svelte2tsx/test/htmlx2jsx/samples/attribute-element/input.svelte
new file mode 100644
index 000000000..12530c162
--- /dev/null
+++ b/packages/svelte2tsx/test/htmlx2jsx/samples/attribute-element/input.svelte
@@ -0,0 +1,3 @@
+<div contentEditable></div>
+<div {contentEditable}></div>
+<div contentEditable={contenteditable}></div>