react-native-web - npm Package Compare versions

Comparing version 0.0.8 to 0.0.9

package.json

 {
   "name": "react-native-web",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "React Native for Web",
@@ -12,3 +12,3 @@ "main": "dist/react-native-web.js",
     "examples": "webpack-dev-server --config config/webpack.config.example.js --inline --hot --colors --quiet",
-    "lint": "eslint config src",
+    "lint": "eslint config examples src",
     "prepublish": "NODE_ENV=publish npm run build",
@@ -21,2 +21,3 @@ "test": "npm run lint && npm run test:unit",
     "inline-style-prefixer": "^0.3.3",
+    "lodash.debounce": "^3.1.1",
     "react-tappable": "^0.7.1",
@@ -26,21 +27,21 @@ "react-textarea-autosize": "^3.0.0"
   "devDependencies": {
-    "babel-core": "^5.8.23",
-    "babel-eslint": "^4.1.1",
+    "babel-core": "^5.8.25",
+    "babel-eslint": "^4.1.3",
     "babel-loader": "^5.3.2",
-    "babel-runtime": "^5.8.20",
+    "babel-runtime": "^5.8.25",
     "eslint": "^1.7.1",
-    "eslint-config-standard": "^4.3.1",
-    "eslint-config-standard-react": "^1.0.4",
+    "eslint-config-standard": "^4.4.0",
+    "eslint-config-standard-react": "^1.1.0",
     "eslint-plugin-react": "^3.6.0",
-    "eslint-plugin-standard": "^1.3.0",
-    "karma": "^0.13.9",
+    "eslint-plugin-standard": "^1.3.1",
+    "karma": "^0.13.11",
     "karma-browserstack-launcher": "^0.1.5",
-    "karma-chrome-launcher": "^0.2.0",
+    "karma-chrome-launcher": "^0.2.1",
     "karma-firefox-launcher": "^0.1.6",
     "karma-mocha": "^0.2.0",
     "karma-mocha-reporter": "^1.1.1",
-    "karma-sourcemap-loader": "^0.3.5",
+    "karma-sourcemap-loader": "^0.3.6",
     "karma-webpack": "^1.7.0",
-    "mocha": "^2.3.0",
-    "node-libs-browser": "^0.5.2",
+    "mocha": "^2.3.3",
+    "node-libs-browser": "^0.5.3",
     "object-assign": "^4.0.1",
@@ -50,4 +51,5 @@ "react": "^0.14.0",
     "react-dom": "^0.14.0",
-    "webpack": "^1.12.1",
-    "webpack-dev-server": "^1.10.1"
+    "react-media-queries": "^2.0.0",
+    "webpack": "^1.12.2",
+    "webpack-dev-server": "^1.12.1"
   },
@@ -54,0 +56,0 @@ "author": "Nicolas Gallagher",

README.md

@@ -5,7 +5,7 @@ # React Native for Web
 [![npm version][npm-image]][npm-url]
+![gzipped size](https://img.shields.io/badge/gzipped-~18.6k-blue.svg)
 
 [React Native][react-native-url] components and APIs for the Web.
-~17.7 KB minified and gzipped.
 
-* [Slack: #react-native-web on reactiflux][slack-url]
+* [Discord: #react-native-web on reactiflux][discord-url]
 * [Gitter: react-native-web][gitter-url]
@@ -145,5 +145,5 @@
 
-### [`ScrollView`](docs/components/ListView.md)
+### [`ScrollView`](docs/components/ScrollView.md)
 
-(TODO)
+A scrollable view with event throttling.
 
@@ -168,3 +168,5 @@ ### [`Text`](docs/components/Text.md)
 
-React Native for Web relies on styles being defined in JavaScript.
+React Native for Web relies on styles being defined in JavaScript. Styling
+components can be achieved with inline styles or the use of
+[StyleSheet](docs/apis/StyleSheet.md).
 
@@ -175,15 +177,42 @@ The `View` component makes it easy to build common layouts with flexbox, such
 
-Styling components can be achieved with inline styles or the use of
-[StyleSheet](docs/apis/StyleSheet.md).
+### Media Queries, pseudo-classes, and pseudo-elements
 
+
+Changing styles and/or the render tree in response to device adaptation can be
+controlled in JavaScript, e.g.,
+[react-media-queries](https://github.com/bloodyowl/react-media-queries),
+[media-query-fascade](https://github.com/tanem/media-query-facade), or
+[react-responsive](https://github.com/contra/react-responsive). This has the
+benefit of co-locating breakpoint-specific DOM and style changes.
+
+Pseudo-classes like `:hover` and `:focus` can be implemented with the `onHover`
+and `onFocus` events.
+
+Pseudo-elements are not supported.
+
 ## Accessibility
 
-Major accessibility features are available through the following props:
-`accessible`, `accessibilityLabel`, `accessibilityLiveRegion`, and
-`accessibilityRole`. The `accessibilityRole` prop is used to determine the
-rendered DOM element. For example:
+On the Web, assistive technologies derive useful information about the
+structure, purpose, and interactivity of apps from their [HTML
+elements][html-accessibility-url], attributes, and [ARIA in
+HTML][aria-in-html-url].
 
+The most common and best supported accessibility features of the Web are
+exposed as the props: `accessible`, `accessibilityLabel`,
+`accessibilityLiveRegion`, and `accessibilityRole`.
+
+React Native for Web does not provide a way to directly control the rendered
+HTML element. The `accessibilityRole` prop is used to infer an [analogous HTML
+element][html-aria-url] to use in addition, where possible. While this may
+contradict some ARIA recommendations, it also helps avoid certain HTML5
+conformance errors and accessibility anti-patterns (e.g., giving a `heading`
+role to a `button` element).
+
+For example:
+
+* `<View accessibilityRole='article' />` => `<article role='article' />`.
 * `<View accessibilityRole='banner' />` => `<header role='banner' />`.
 * `<View accessibilityRole='button' />` => `<button type='button' role='button' />`.
 * `<Text accessibilityRole='link' href='/' />` => `<a role='link' href='/' />`.
+* `<View accessibilityRole='main' />` => `<main role='main' />`.
 
@@ -210,10 +239,13 @@ See the component documentation for more details.
 
+[aria-in-html-url]: https://w3c.github.io/aria-in-html/
 [contributing-url]: https://github.com/necolas/react-native-web/blob/master/CONTRIBUTING.md
+[discord-url]: http://join.reactiflux.com
 [flexbox-guide-url]: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
 [gitter-url]: https://gitter.im/necolas/react-native-web
+[html-accessibility-url]: http://www.html5accessibility.com/
+[html-aria-url]: http://www.w3.org/TR/html-aria/
 [npm-image]: https://badge.fury.io/js/react-native-web.svg
 [npm-url]: https://npmjs.org/package/react-native-web
 [react-native-url]: https://facebook.github.io/react-native/
-[slack-url]: https://reactiflux.slack.com/messages/react-native-web/
 [travis-image]: https://travis-ci.org/necolas/react-native-web.svg?branch=master
 [travis-url]: https://travis-ci.org/necolas/react-native-web

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

166336

increased by12.31%

Lines of code

4030

increased by14.26%

Number of lines in readme file

247

increased by14.88%

Worsened metrics

Dependency count

4

increased by33.33%

Dev dependency count

26

increased by4%

Dependency changes

• + Addedlodash.debounce@^3.1.1

• + Addedlodash._getnative@3.9.1(transitive)

• + Addedlodash.debounce@3.1.1(transitive)