First patch: 41159bcb10
@chriskjaer mentioned that changing from 'div' to 'span' introduces
different validation errors, e.g., <span><form>a</form></span>.
This patch uses 'context' to switch to a 'span' element if a 'View' is
being rendered within a 'button' element.
There are certain contexts where using a `div` is invalid HTML and may
cause rendering issues. Change the default element created by
`createReactDOMComponent` to a `span`.
**Appendix**
The following HTML results a validator error.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>test</title>
<button><div>a</div></button>
Error: Element `div` not allowed as child of element `button` in this
context.
Source: https://validator.w3.org/nu/#textarea
This fixes several issues with 'StyleSheet' and simplifies the
implementation.
1. The generated style sheet could render after an apps existing style
sheets, potentially overwriting certain 'html' and 'body' styles. To fix
this, the style sheet is now rendered first in the document head.
2. 'StyleSheet' didn't make it easy to render app shells on the server.
The prerendered style sheet would contain classnames that didn't apply
to the client-generated style sheet (in part because the class names
were not generated as a hash of the declaration). When the client
initialized, server-rendered parts of the page could become unstyled. To
fix this 'StyleSheet' uses inline styles by default and a few predefined
CSS rules where inline styles are not possible.
3. Even with the strategy of mapping declarations to unique CSS rules,
very large apps can produce very large style sheets. For example,
twitter.com would produce a gzipped style sheet ~30 KB. Issues related
to this are also alleviated by using inline styles.
4. 'StyleSheet' didn't really work unless you rendered an app using
'AppRegistry'. To fix this, 'StyleSheet' now handles injection of the
DOM style sheet.
Using inline styles doesn't appear to have any serious performance
problems compared to using single classes (ref #110).
Fix#90Fix#106
Add 'createReactStyleObject' to transform a React Native style object
into a React DOM-compatible style object. This is also needed to ensure
that 'setNativeProps' works as expected.
Animated uses 'setNativeProps' to update styles. This mutates the DOM
without using React. But the code path was not adding 'px' units to
transform values and browsers were ignoring the style.
Fix#129
The previous implementation relied on a buggy sorting strategy. It could
result in shortform properties replacing the values set for longform
properties. This patch avoids expanding shorthand values to a longform
property if it declared in the original style object.
Fix#141
Fix the layout of placeholder text and shift focus to the DOM input when
`TextInput` is clicked or pressed.
Thanks to @tuckerconnelly and @Dremora.
Fix#138Fix#119Close#137
