fix(casing): Support multiple uppercase characters

Support multiple uppercase characters in element and attribute names.

* `customLIAttr` -> `custom-li-attr`
* `CustomAttR` -> `custom-attr`

Author: nicojs

src/elements.tsx

@@ -12,7 +12,7 @@ const isUpper = (input: string, index: number) => {
     return capitalACharCode <= charCode && capitalZCharCode >= charCode;
 };
 
-type AttributeValue = number | string | object;
+type AttributeValue = number | string | Date;
 
 interface Attributes {
     [key: string]: AttributeValue;
@@ -21,7 +21,10 @@ interface Attributes {
 const toKebabCase = (camelCased: string) => {
     let kebabCased = '';
     for (let i = 0; i < camelCased.length; i++) {
-        if (isUpper(camelCased, i)) {
+        const prevUpperCased = i > 0 ? isUpper(camelCased, i - 1) : true;
+        const currentUpperCased = isUpper(camelCased, i);
+        const nextUpperCased = i < camelCased.length - 1 ? isUpper(camelCased, i + 1) : true;
+        if (!prevUpperCased && currentUpperCased || currentUpperCased && !nextUpperCased) {
             kebabCased += '-';
             kebabCased += camelCased[i].toLowerCase();
         } else {

test/html-fragments.spec.tsx

@@ -62,4 +62,9 @@ describe('using a number attribute', () => {
     testEqual('<progress value="2" max="5"></progress>', () => <progress value={2} max={5}></progress>);
     testEqual('<td colspan="2" rowspan="5"></td>', () => <td colspan={2} rowspan={5}></td>);
     testEqual('<th colspan="2" rowspan="5"></th>', () => <th colspan={2} rowspan={5}></th>);
+});
+
+describe('custom elements', () => {
+    testEqual('<custom-element a-custom-attr="value" custom-li-attr="li"></custom-element>', () => <customElement ACustomAttr="value" customLIAttr="li"></customElement>);
+    testEqual('<div some-data="s"></div>', () => <div some-data="s"></div>);
 });