[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:
parent
18452940f0
commit
47e1d1aef8
|
@ -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) {
|
||||
|
|
|
@ -10,6 +10,8 @@
|
|||
*/
|
||||
'use strict';
|
||||
|
||||
require('regenerator/runtime');
|
||||
|
||||
var React = require('react-native');
|
||||
|
||||
var {
|
||||
|
|
|
@ -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 />;
|
||||
}
|
||||
|
|
|
@ -26,6 +26,7 @@
|
|||
require('RCTDebugComponentOwnership');
|
||||
require('RCTDeviceEventEmitter');
|
||||
require('PerformanceLogger');
|
||||
require('regenerator/runtime');
|
||||
|
||||
if (typeof GLOBAL === 'undefined') {
|
||||
GLOBAL = this;
|
||||
|
|
11
package.json
11
package.json
|
@ -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",
|
||||
|
|
|
@ -15,10 +15,12 @@
|
|||
"es6.properties.shorthand",
|
||||
"es6.spread",
|
||||
"es6.templateLiterals",
|
||||
"es7.asyncFunctions",
|
||||
"es7.trailingFunctionCommas",
|
||||
"es7.objectRestSpread",
|
||||
"flow",
|
||||
"react"
|
||||
"react",
|
||||
"regenerator"
|
||||
],
|
||||
"sourceMaps": false
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue