Skip to content
This repository was archived by the owner on Aug 9, 2023. It is now read-only.

Fix camelcased custom properties in React #9

Closed
kthjm wants to merge 4 commits into from
Closed

Fix camelcased custom properties in React #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b7ecfb2
Fix addAttribute for React
kthjm Nov 24, 2017
dc3ded7
Fix test new failed
kthjm Nov 24, 2017
2fa2b70
Fix lint new failed
kthjm Nov 24, 2017
9b01297
Update test for react/attributeName
kthjm Nov 24, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,16 @@ function addAttribute(props, name, value, ctx) {
return;
}

name = info.name || paramCase(name);
if (ctx.react) {
var beginFour = name.slice(0, 4);
if ((beginFour === 'data' || beginFour === 'aria') && name.length > 4) {
name = paramCase(name);
} else {
name = info.name || camelCase(name);
}
} else {
name = info.name || paramCase(name);
}

if (value !== null && typeof value === 'object' && 'length' in value) {
/* Accept `array`. Most props are space-separater. */
Expand Down
22 changes: 18 additions & 4 deletions test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ test('hast-to-hyperscript', function (t) {

t.test('should support `React.createElement` in `development`', function (st) {
var currentEnv = process.env.NODE_ENV;
var baseline = doc.replace(/color:red;/, 'color:red');
var baseline = doc.replace(/color:red;/, 'color:red').replace(/camel-case/, 'camelCase');
process.env.NODE_ENV = 'development';

var actual = toH(r, hast);
Expand All @@ -160,7 +160,7 @@ test('hast-to-hyperscript', function (t) {
r('strong', {
key: 'h-2',
style: {color: 'red'},
'camel-case': 'on off',
camelCase: 'on off',
'data-some': 'yes',
'aria-valuenow': '1'
}, ['charlie']),
Expand All @@ -180,7 +180,7 @@ test('hast-to-hyperscript', function (t) {

t.test('should support `React.createElement` in `production`', function (st) {
var currentEnv = process.env.NODE_ENV;
var baseline = doc.replace(/color:red;/, 'color:red');
var baseline = doc.replace(/color:red;/, 'color:red').replace(/camel-case/, 'camelCase');
process.env.NODE_ENV = 'production';

var actual = toH(r, hast);
Expand All @@ -197,7 +197,7 @@ test('hast-to-hyperscript', function (t) {
r('strong', {
key: 'h-2',
style: {color: 'red'},
'camel-case': 'on off',
camelCase: 'on off',
'data-some': 'yes',
'aria-valuenow': '1'
}, ['charlie']),
Expand Down Expand Up @@ -271,6 +271,20 @@ test('hast-to-hyperscript', function (t) {
'react: should parse an invalid style declaration'
);

st.deepEqual(
toH(r, u('element', {tagName: 'div', properties: {
'camel-case': 'on off',
'data-some': 'yes',
'aria-valuenow': '1'
}})).props,
{
camelCase: 'on off',
'data-some': 'yes',
'aria-valuenow': '1'
},
'react: should parse attributeName as camelCase with the exceptions'
);

st.end();
});

Expand Down