Skip to content

Commit aa1733f

Browse files
committed
fix(casing): Support multiple uppercase characters
Support multiple uppercase characters in element and attribute names. * `customLIAttr` -> `custom-li-attr` * `CustomAttR` -> `custom-attr`
1 parent c8daea2 commit aa1733f

File tree

2 files changed

+10
-2
lines changed

2 files changed

+10
-2
lines changed

src/elements.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const isUpper = (input: string, index: number) => {
1212
return capitalACharCode <= charCode && capitalZCharCode >= charCode;
1313
};
1414

15-
type AttributeValue = number | string | object;
15+
type AttributeValue = number | string | Date;
1616

1717
interface Attributes {
1818
[key: string]: AttributeValue;
@@ -21,7 +21,10 @@ interface Attributes {
2121
const toKebabCase = (camelCased: string) => {
2222
let kebabCased = '';
2323
for (let i = 0; i < camelCased.length; i++) {
24-
if (isUpper(camelCased, i)) {
24+
const prevUpperCased = i > 0 ? isUpper(camelCased, i - 1) : true;
25+
const currentUpperCased = isUpper(camelCased, i);
26+
const nextUpperCased = i < camelCased.length - 1 ? isUpper(camelCased, i + 1) : true;
27+
if (!prevUpperCased && currentUpperCased || currentUpperCased && !nextUpperCased) {
2528
kebabCased += '-';
2629
kebabCased += camelCased[i].toLowerCase();
2730
} else {

test/html-fragments.spec.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,4 +62,9 @@ describe('using a number attribute', () => {
6262
testEqual('<progress value="2" max="5"></progress>', () => <progress value={2} max={5}></progress>);
6363
testEqual('<td colspan="2" rowspan="5"></td>', () => <td colspan={2} rowspan={5}></td>);
6464
testEqual('<th colspan="2" rowspan="5"></th>', () => <th colspan={2} rowspan={5}></th>);
65+
});
66+
67+
describe('custom elements', () => {
68+
testEqual('<custom-element a-custom-attr="value" custom-li-attr="li"></custom-element>', () => <customElement ACustomAttr="value" customLIAttr="li"></customElement>);
69+
testEqual('<div some-data="s"></div>', () => <div some-data="s"></div>);
6570
});

0 commit comments

Comments
 (0)