[Async] Enable async/await and update UIExplorer and tests

Summary:
- Enables async/await in .babelrc and transformer.js
- Adds regenerator to package.json. Users still need to explicitly require the regenerator runtime -- this is so that you only pay for what you use.
- Update AsyncStorage examples in UIExplorer to use async/await
- Update promise tests in UIExplorer to use async/await in addition to the promise API

Closes https://github.com/facebook/react-native/pull/1765
Github Author: James Ide <ide@jameside.com>
This commit is contained in:
James Ide 2015-08-04 05:23:31 -07:00
parent 18452940f0
commit 47e1d1aef8
7 changed files with 68 additions and 28 deletions

View File

@ -29,18 +29,23 @@ var COLORS = ['red', 'orange', 'yellow', 'green', 'blue'];
var BasicStorageExample = React.createClass({
componentDidMount() {
AsyncStorage.getItem(STORAGE_KEY)
.then((value) => {
this._loadInitialState().done();
},
async _loadInitialState() {
try {
var value = await AsyncStorage.getItem(STORAGE_KEY);
if (value !== null){
this.setState({selectedValue: value});
this._appendMessage('Recovered selection from disk: ' + value);
} else {
this._appendMessage('Initialized with no selection on disk.');
}
})
.catch((error) => this._appendMessage('AsyncStorage error: ' + error.message))
.done();
} catch (error) {
this._appendMessage('AsyncStorage error: ' + error.message);
}
},
getInitialState() {
return {
selectedValue: COLORS[0],
@ -80,19 +85,23 @@ var BasicStorageExample = React.createClass({
);
},
_onValueChange(selectedValue) {
async _onValueChange(selectedValue) {
this.setState({selectedValue});
AsyncStorage.setItem(STORAGE_KEY, selectedValue)
.then(() => this._appendMessage('Saved selection to disk: ' + selectedValue))
.catch((error) => this._appendMessage('AsyncStorage error: ' + error.message))
.done();
try {
await AsyncStorage.setItem(STORAGE_KEY, selectedValue);
this._appendMessage('Saved selection to disk: ' + selectedValue);
} catch (error) {
this._appendMessage('AsyncStorage error: ' + error.message);
}
},
_removeStorage() {
AsyncStorage.removeItem(STORAGE_KEY)
.then(() => this._appendMessage('Selection removed from disk.'))
.catch((error) => { this._appendMessage('AsyncStorage error: ' + error.message) })
.done();
async _removeStorage() {
try {
await AsyncStorage.removeItem(STORAGE_KEY);
this._appendMessage('Selection removed from disk.');
} catch (error) {
this._appendMessage('AsyncStorage error: ' + error.message);
}
},
_appendMessage(message) {

View File

@ -10,6 +10,8 @@
*/
'use strict';
require('regenerator/runtime');
var React = require('react-native');
var {

View File

@ -17,13 +17,18 @@ var PromiseTest = React.createClass({
shouldResolve: false,
shouldReject: false,
shouldSucceedAsync: false,
shouldThrowAsync: false,
componentDidMount() {
Promise.all([
this.testShouldResolve(),
this.testShouldReject(),
this.testShouldSucceedAsync(),
this.testShouldThrowAsync(),
]).then(() => RCTTestModule.markTestPassed(
this.shouldResolve && this.shouldReject
this.shouldResolve && this.shouldReject &&
this.shouldSucceedAsync && this.shouldThrowAsync
));
},
@ -41,6 +46,24 @@ var PromiseTest = React.createClass({
.catch(() => this.shouldReject = true);
},
async testShouldSucceedAsync() {
try {
await RCTTestModule.shouldResolve();
this.shouldSucceedAsync = true;
} catch (e) {
this.shouldSucceedAsync = false;
}
},
async testShouldThrowAsync() {
try {
await RCTTestModule.shouldReject();
this.shouldThrowAsync = false;
} catch (e) {
this.shouldThrowAsync = true;
}
},
render() {
return <React.View />;
}

View File

@ -26,6 +26,7 @@
require('RCTDebugComponentOwnership');
require('RCTDeviceEventEmitter');
require('PerformanceLogger');
require('regenerator/runtime');
if (typeof GLOBAL === 'undefined') {
GLOBAL = this;

View File

@ -49,13 +49,13 @@
"absolute-path": "0.0.0",
"babel": "5.4.3",
"babel-core": "5.6.4",
"chalk": "^1.0.0",
"chalk": "1.0.0",
"connect": "2.8.3",
"debug": "~2.1.0",
"graceful-fs": "^3.0.6",
"debug": "2.1.0",
"graceful-fs": "3.0.6",
"image-size": "0.3.5",
"immutable": "^3.7.4",
"joi": "~5.1.0",
"joi": "5.1.0",
"jstransform": "11.0.1",
"module-deps": "3.5.6",
"optimist": "0.6.1",
@ -63,11 +63,12 @@
"react-timer-mixin": "^0.13.1",
"react-tools": "git://github.com/facebook/react#b4e74e38e43ac53af8acd62c78c9213be0194245",
"rebound": "^0.0.12",
"regenerator": "0.8.31",
"sane": "^1.1.2",
"semver": "^4.3.6",
"source-map": "0.1.31",
"stacktrace-parser": "frantic/stacktrace-parser#493c5e5638",
"uglify-js": "~2.4.16",
"uglify-js": "2.4.16",
"underscore": "1.7.0",
"wordwrap": "^1.0.0",
"worker-farm": "^1.3.1",

View File

@ -15,10 +15,12 @@
"es6.properties.shorthand",
"es6.spread",
"es6.templateLiterals",
"es7.asyncFunctions",
"es7.trailingFunctionCommas",
"es7.objectRestSpread",
"flow",
"react"
"react",
"regenerator"
],
"sourceMaps": false
}

View File

@ -28,10 +28,12 @@ function transform(srcTxt, filename, options) {
'es6.properties.shorthand',
'es6.spread',
'es6.templateLiterals',
'es7.asyncFunctions',
'es7.trailingFunctionCommas',
'es7.objectRestSpread',
'flow',
'react',
'regenerator',
],
sourceFileName: filename,
sourceMaps: false,