(feat) transform number attrs (#428)

#366

When
1. an attribute expects input of number only
2. its value is of type number
3. attribute is written as string

then transform it
Example: `<div tabindex="1"></div>` --> `<div tabindex={1}></div>`

Author: dummdidumm

packages/svelte2tsx/src/htmlxtojsx.ts

@@ -17,6 +17,28 @@ const oneWayBindingAttributes: Map<string, ElementType> = new Map(
         ),
 );
 
+/**
+ * List taken from `svelte-jsx.d.ts` by searching for all attributes of type number
+ */
+const numberOnlyAttributes = new Set([
+    'cols',
+    'colspan',
+    'high',
+    'low',
+    'marginheight',
+    'marginwidth',
+    'minlength',
+    'maxlength',
+    'optimum',
+    'rows',
+    'rowspan',
+    'size',
+    'span',
+    'start',
+    'tabindex',
+    'results',
+]);
+
 const beforeStart = (start: number) => start - 1;
 
 type Walker = (node: Node, parent: Node, prop: string, index: number) => void;
@@ -387,8 +409,27 @@ export function convertHtmlxToJsx(
                 const endsWithQuote =
                     htmlx.lastIndexOf('"', attrVal.end) === attrVal.end - 1 ||
                     htmlx.lastIndexOf("'", attrVal.end) === attrVal.end - 1;
-                if (attrVal.end == attr.end && !endsWithQuote) {
-                    //we are not quoted. Add some
+                const needsQuotes = attrVal.end == attr.end && !endsWithQuote;
+
+                const hasBrackets =
+                    htmlx.lastIndexOf('}', attrVal.end) === attrVal.end - 1 ||
+                    htmlx.lastIndexOf('}"', attrVal.end) === attrVal.end - 1 ||
+                    htmlx.lastIndexOf("}'", attrVal.end) === attrVal.end - 1;
+                const needsNumberConversion =
+                    !hasBrackets &&
+                    parent.type === 'Element' &&
+                    numberOnlyAttributes.has(attr.name.toLowerCase()) &&
+                    !isNaN(attrVal.data);
+
+                if (needsNumberConversion) {
+                    if (needsQuotes) {
+                        str.prependRight(equals + 1, '{');
+                        str.appendLeft(attr.end, '}');
+                    } else {
+                        str.overwrite(equals + 1, equals + 2, '{');
+                        str.overwrite(attr.end - 1, attr.end, '}');
+                    }
+                } else if (needsQuotes) {
                     str.prependRight(equals + 1, '"');
                     str.appendLeft(attr.end, '"');
                 }

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

@@ -0,0 +1,2 @@
+<><SomeComponent tabindex="1" />
+<div tabindex={1} maxlength={1} minlength={1} span={1} role="none"></div></>

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

@@ -0,0 +1,2 @@
+<SomeComponent tabindex="1" />
+<div tabindex="1" maxlength=1 minlength={1} span="{1}" role="none"></div>