(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

Author: jasonlyu123

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

packages/svelte2tsx/test/htmlx2jsx/samples/attribute-element/expected.jsx

@@ -0,0 +1,3 @@
+<><div contenteditable></div>
+<div contenteditable={contentEditable}></div>
+<div contenteditable={contenteditable}></div></>

packages/svelte2tsx/test/htmlx2jsx/samples/attribute-element/input.svelte

@@ -0,0 +1,3 @@
+<div contentEditable></div>
+<div {contentEditable}></div>
+<div contentEditable={contenteditable}></div>