fix(casing): Support multiple uppercase characters

Support multiple uppercase characters in element and attribute names. * `customLIAttr` -> `custom-li-attr` * `CustomAttR` -> `custom-attr`
nicojs · May 1, 2017 · aa1733f · aa1733f
1 parent c8daea2
commit aa1733f
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/src/elements.tsx b/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 {

diff --git a/test/html-fragments.spec.tsx b/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>);
 });