(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
sveltejs · Sep 1, 2020 · 048e467 · 048e467
1 parent 41827f7
commit 048e467
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 2 deletions.
diff --git 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
@@ -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
@@ -0,0 +1,3 @@
+<div contentEditable></div>
+<div {contentEditable}></div>
+<div contentEditable={contenteditable}></div>