Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom Attributes Scenario 2: Write badly cased attributes. Remove most of whitelist. #10385

Merged
merged 49 commits into from
Aug 15, 2017

Conversation

nhunzaker
Copy link
Contributor

@nhunzaker nhunzaker commented Aug 4, 2017

Follow-up work from #7311. This PR implements scenario 2 for custom attributes, as described in #7311 (comment).

  1. Badly cased attribute names still write to the DOM.
  2. Cases like classname, htmlfor, and arabicform, do not alias. They write as classname, htmlfor, and arabicform.
  3. All attribute whitelist entries that enforce a specific casing have been removed.
  4. The ARIA whitelist has been moved to a developer-only enforcement (but the logic is the same as master)

Build size:

react-dom.production.min.js: 109.01kb (34.40kb gz)

screen shot 2017-08-07 at 10 33 16 am

@gaearon
Copy link
Collaborator

gaearon commented Aug 4, 2017

:O

@@ -67,12 +60,23 @@ var HTMLDOMPropertyConfig = {
// Style must be explicitely set in the attribute list. React components
// expect a style object
start: HAS_NUMERIC_VALUE,
// Style must be explicitely set in the attribute list. React components
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typo: explicitly

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Got it.

srcLang: 0,
srcSet: 0,
// Style must be explicitely set in the attribute list. React components
// expect a style object
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Duplicate comment?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yikes! Yes.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in 3a50c07

@gaearon
Copy link
Collaborator

gaearon commented Aug 4, 2017

How did you verify the changes? Is it worth creating a test page with all these attributes to ensure their support didn’t regress? (At least once.)

@nhunzaker
Copy link
Contributor Author

My testing could be more exhaustive. I'll make a test page.

label: 0,
lang: 0,
list: 0,
loop: HAS_BOOLEAN_VALUE,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there anything special about it?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ack! This is a mistake 😢

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added back in a218130

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like this is still missing in the latest version here, unless I'm missing something?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh I see it moved down.

srcSet: 0,
start: HAS_NUMERIC_VALUE,
step: 0,
// Style must be explicitly set in the attribute list. React components
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this a note about server renderer? I imagine we don't get into style branch on the client because there’s a hardcoded one earlier.

What about custom elements? Does style still work correctly on those? (And did it at all in the past?)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Excellent questions. I will verify.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I imagine we don't get into style branch on the client because there’s a hardcoded one earlier.

We don't get to the style branch, but we validate all properties here:
https://github.com/facebook/react/blob/master/src/renderers/dom/fiber/ReactDOMFiberComponent.js#L406

The UnknownPropertyHook calls DOMProperty.shouldSetAttribute and sees that the style property is using an object, so it warns. This check doesn't happen if the style property is in the attribute config.

So keeping style: 0 here prevents the warning.

What about custom elements? Does style still work correctly on those? (And did it at all in the past?)

What is the intended behavior of passing style to custom elements? Should it pass the value "as is", or provide style pre-processing? Right now it looks like it's sending down a style string.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think for now we're okay with doing whatever we used to be doing.

@nhunzaker nhunzaker changed the title Remove remaining entries in whitelist that are only needed for developer warnings Custom Attributes Scenario 2 Aug 7, 2017
@@ -66,7 +66,8 @@ var HTMLDOMPropertyConfig = {
// See http://schema.org/docs/gs.html
itemScope: HAS_BOOLEAN_VALUE,
// Facebook internal attribute. This is an object attribute that
// impliments a custom toString() method
// impliments a custom toString() method. Objects are not allowed as
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typo: implements

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Man I need a git commit hook for impliments. Every. Single. Time. Fixed in aaafa7f

@nhunzaker nhunzaker changed the title Custom Attributes Scenario 2 Custom Attributes Scenario 1: Write badly cased attributes. Remove most of whitelist. Aug 7, 2017
@nhunzaker nhunzaker changed the title Custom Attributes Scenario 1: Write badly cased attributes. Remove most of whitelist. Custom Attributes Scenario 2: Write badly cased attributes. Remove most of whitelist. Aug 7, 2017
return DOMProperty.properties.hasOwnProperty(lowerCased)
? DOMProperty.properties[lowerCased]
: null;
},
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a final word here. In this scenario, all attributes are referenced as their lowercase form internally. I've hidden that within getPropertyInfo to avoid needing to know about lowercasing attributes outside of DOMProperty.js.

y2: 0,
yChannelSelector: 'yChannelSelector',
z: 0,
zoomAndPan: 'zoomAndPan',
};

var SVGDOMPropertyConfig = {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I feel like there's another step here where we could string manipulate xml:lang or vert-origin-y into camel-case, that might cut the overall gzip size.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah I want to try it. I'll take 5.

}

if (DOMAttributeNamespaces.hasOwnProperty(propName)) {
propertyInfo.attributeNamespace = DOMAttributeNamespaces[propName];
}

if (DOMPropertyNames.hasOwnProperty(propName)) {
propertyInfo.propertyName = DOMPropertyNames[propName];
}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

DOMPropertyNames is not used by any injection.

gaearon
gaearon previously requested changes Aug 7, 2017
Copy link
Collaborator

@gaearon gaearon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is amazing work.

There's a (hopefully!) last change in semantics we need to make that I wrote about in #10399 (comment).

Thanks again for working through this! I really hope this is the last change we need to make. If not, I’ll try to address the rest myself tomorrow.

additive: 0,
alignmentBaseline: 'alignment-baseline',
allowReorder: 'allowReorder',
alphabetic: 0,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can't figure out if this is a boolean attribute or not.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just discovered this page. True life saver.

ascent: 0,
attributeName: 'attributeName',
attributeType: 'attributeType',
autoReverse: 'autoReverse',
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This one either.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not in the spec.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oooh fun.

hanging: 0,
horizAdvX: 'horiz-adv-x',
horizOriginX: 'horiz-origin-x',
ideographic: 0,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a value for dominantBaseline, and I can't find a description of it anywhere.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Number.
https://www.w3.org/TR/SVG/fonts.html#FontFaceElementIdeographicAttribute

Jeez Nate. Why don't you read the spec?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Haha :-) It's a bit tough to find.

@gaearon
Copy link
Collaborator

gaearon commented Aug 8, 2017

We'll really need some automated way to test we didn't regress here (just once). I'm thinking maybe we could take all existing whitelists, make a page that renders all these properties with React 15, and then verify these values are still there with 16. I'll try to do it tomorrow.

@nhunzaker
Copy link
Contributor Author

nhunzaker commented Aug 8, 2017

@gaearon Okay. This is not in a fully tested, and possibly not in a working state, but I've pushed up commits that add back what I believe are all the boolean properties. In addition to the ones you identified, I went through the entire SVG spec (okay okay I cmd + f'ed through it) and the only boolean SVG attributes I could find were:

  • autoReverse
  • externalResourcesRequired
  • preserveAlpha

autoReverse is technically from SMIL. I'll browse through and see if we aren't missing anything.

@nhunzaker
Copy link
Contributor Author

SMIL state module defines a few more:
https://www.w3.org/TR/smil/smil-DTD.html

  • 'skipContent'
  • 'external'
  • 'syncMaster'

I think that's it.

@gaearon gaearon deleted the nh-gut-whitelist branch October 6, 2017 21:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

10 participants