Skip to content

Commit

Permalink
[change] Compile using Babel 7
Browse files Browse the repository at this point in the history 
Fix #1170
Close #1205
Close #1191
  • Loading branch information
@necolas
necolas committed Dec 20, 2018
1 parent d2ea5cb commit d152d30
Show file tree
Hide file tree
Showing 12 changed files with 3,096 additions and 539 deletions.
5 changes: 0 additions & 5 deletions .babelrc
View file

This file was deleted.

7 changes: 7 additions & 0 deletions babel.config.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
module.exports = function(api) {
api.cache(true);

return {
presets: ['./scripts/babel/preset']
};
};
2 changes: 1 addition & 1 deletion docs/guides/advanced.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,5 +109,5 @@ If you're using `skpm`, you can rely on an [undocumented
feature](https://github.com/sketch-pm/skpm/blob/master/lib/utils/webpackConfig.js)
which will merge your `webpack.config.js`, `.babelrc`, or `package.json` Babel
config into its internal webpack config. The simplest option may be to use the
[babel-plugin-module-alias](https://www.npmjs.com/package/babel-plugin-module-alias)
[babel-plugin-module-resolver](https://www.npmjs.com/package/babel-plugin-module-resolver)
and configure it in your `package.json`.
29 changes: 15 additions & 14 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
"website:release": "cd packages/website && yarn release",
"flow": "flow",
"fmt": "prettier --write \"**/*.js\"",
"jest": "BABEL_ENV=commonjs jest --config ./scripts/jest/config.js",
"jest": "jest --config ./scripts/jest/config.js",
"lint": "yarn lint:check --fix",
"lint:check": "eslint packages scripts",
"precommit": "lint-staged",
Expand All @@ -25,18 +25,19 @@
"test": "yarn flow && yarn lint:check && yarn jest --runInBand"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-eslint": "^8.2.3",
"babel-loader": "^7.1.2",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-react-remove-prop-types": "^0.4.10",
"babel-preset-env": "^1.6.1",
"babel-preset-flow": "^6.23.0",
"babel-preset-react": "^6.24.1",
"babel-preset-react-native": "^4.0.0",
"@babel/cli": "^7.2.3",
"@babel/core": "^7.2.2",
"@babel/plugin-proposal-class-properties": "^7.2.3",
"@babel/plugin-proposal-object-rest-spread": "^7.2.0",
"@babel/preset-env": "^7.2.3",
"@babel/preset-flow": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"babel-eslint": "^10.0.0",
"babel-jest": "24.0.0-alpha.9",
"babel-loader": "^8.0.0",
"babel-plugin-add-module-exports": "^1.0.0",
"babel-plugin-transform-react-remove-prop-types": "^0.4.21",
"babel-preset-react-native": "^4.0.1",
"caniuse-api": "^2.0.0",
"del-cli": "^1.1.0",
"enzyme": "^3.6.0",
Expand All @@ -49,7 +50,7 @@
"flow-bin": "^0.63.1",
"glob": "^7.1.2",
"husky": "^0.14.3",
"jest": "^22.4.3",
"jest": "24.0.0-alpha.9",
"jest-canvas-mock": "^1.0.2",
"lint-staged": "^7.1.0",
"npm-run-all": "^4.1.3",
Expand Down
4 changes: 2 additions & 2 deletions packages/examples/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,14 @@
"release": "yarn build && git checkout gh-pages && rm -rf ../../examples && mv dist ../../examples && git add -A && git commit -m \"Examples deploy\" && git push origin gh-pages && git checkout -"
},
"dependencies": {
"babel-runtime": "^6.26.0",
"@babel/runtime": "^7.2.0",
"react": "^16.5.1",
"react-dom": "^16.5.1",
"react-native-web": "0.9.9"
},
"devDependencies": {
"@babel/plugin-transform-runtime": "^7.2.0",
"babel-plugin-react-native-web": "0.9.9",
"babel-plugin-transform-runtime": "^6.23.0",
"file-loader": "^1.1.11",
"webpack": "^4.8.1",
"webpack-bundle-analyzer": "^2.11.1",
Expand Down
1 change: 0 additions & 1 deletion packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,6 @@ input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit

exports[`AppRegistry getApplication returns "element" and "getStyleElement" 1`] = `
<AppContainer
WrapperComponent={undefined}
rootTag={Object {}}
>
<RootComponent />
Expand Down
2 changes: 1 addition & 1 deletion packages/react-native-web/src/exports/Text/__tests__/index-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ describe('components/Text', () => {
expect(component.contains(children)).toEqual(true);
});

test('prop "numberOfLines"');
test('prop "numberOfLines"', () => {});

test('prop "onPress"', () => {
const onPress = e => {};
Expand Down
2 changes: 1 addition & 1 deletion packages/react-native-web/src/exports/TextInput/__tests__/index-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const testIfDocumentIsFocused = (message, fn) => {
if (document.hasFocus && document.hasFocus()) {
test(message, fn);
} else {
test.skip(`${message} – document is not focused`);
test.skip(`${message} – document is not focused`, () => {});
}
};

Expand Down
3 changes: 1 addition & 2 deletions packages/react-native-web/src/exports/TextInput/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,8 +150,6 @@ class TextInput extends Component<*> {

static State = TextInputState;

blur: Function;

clear() {
this._node.value = '';
}
Expand Down Expand Up @@ -401,6 +399,7 @@ class TextInput extends Component<*> {
onSubmitEditing(e);
}
if (shouldBlurOnSubmit) {
// $FlowFixMe
this.blur();
}
}
Expand Down
17 changes: 9 additions & 8 deletions scripts/babel/preset.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
const createConfig = ({ modules }) => ({
presets: [
[
'babel-preset-env',
'@babel/preset-env',
{
loose: true,
modules,
exclude: ['transform-es2015-typeof-symbol'],
exclude: ['transform-typeof-symbol'],
targets: {
browsers: [
'chrome 38',
Expand All @@ -24,17 +24,18 @@ const createConfig = ({ modules }) => ({
}
}
],
'babel-preset-react',
'babel-preset-flow'
'@babel/preset-react',
'@babel/preset-flow'
],
plugins: [
['babel-plugin-transform-class-properties', { loose: true }],
['babel-plugin-transform-object-rest-spread', { useBuiltIns: true }],
['@babel/plugin-proposal-class-properties', { loose: true }],
['@babel/plugin-proposal-object-rest-spread', { useBuiltIns: true }],
['babel-plugin-transform-react-remove-prop-types', { mode: 'wrap' }]
].concat(modules ? ['babel-plugin-add-module-exports'] : [])
});

module.exports =
process.env.BABEL_ENV === 'commonjs'
module.exports = function() {
return process.env.BABEL_ENV === 'commonjs' || process.env.NODE_ENV === 'test'
? createConfig({ modules: 'commonjs' })
: createConfig({ modules: false });
};
2 changes: 1 addition & 1 deletion scripts/jest/config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ module.exports = {
rootDir: process.cwd(),
roots: ['<rootDir>/packages'],
setupFiles: ['jest-canvas-mock'],
setupTestFrameworkScriptFile: require.resolve('./setupFramework.js'),
setupFilesAfterEnv: [require.resolve('./setupFramework.js')],
snapshotSerializers: ['enzyme-to-json/serializer'],
testEnvironment: 'jsdom',
timers: 'fake'
Expand Down
Loading

2 comments on commit d152d30

@necolas
Copy link
Owner Author

Choose a reason for hiding this comment

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

@hzoo I've spent all day trying to get this Babel 7 upgrade working. While all the jest tests now pass, if I try to run the compile script I get errors like this where it is choking on Flow types. Hoping you have an idea of what I'm missing.

$ cd packages/react-native-web && babel src --out-dir dist --ignore "**/__tests__"
{ SyntaxError: /Users/necolas/OpenSource/github/react-native-web/packages/react-native-web/src/exports/AccessibilityInfo/index.js: Unexpected token, expected "{" (19:19)

  17 |    * The result is `true` when a screen reader is enabled and `false` otherwise.
  18 |    */
> 19 |   fetch: function(): Promise<*> {
     |                    ^
  20 |     return new Promise((resolve, reject) => {
  21 |       resolve(true);
  22 |     });
    at Parser.raise (/Users/necolas/OpenSource/github/react-native-web/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:4051:15)
    at Parser.unexpected (/Users/necolas/OpenSource/github/react-native-web/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:5382:16)
    at Parser.expect (/Users/necolas/OpenSource/github/react-native-web/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:5370:28)
    at Parser.parseBlock (/Users/necolas/OpenSource/github/react-native-web/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:8048:10)
    at Parser.parseFunctionBody (/Users/necolas/OpenSource/github/react-native-web/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:7157:24)
    at Parser.parseFunctionBodyAndFinish (/Users/necolas/OpenSource/github/react-native-web/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:7139:10)
    at /Users/necolas/OpenSource/github/react-native-web/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:8225:14
    at Parser.withTopicForbiddingContext (/Users/necolas/OpenSource/github/react-native-web/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:7429:14)
    at Parser.parseFunction (/Users/necolas/OpenSource/github/react-native-web/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:8224:10)
    at Parser.parseFunctionExpression (/Users/necolas/OpenSource/github/react-native-web/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:6586:17)
  pos: 479,
  loc: Position { line: 19, column: 19 },
  code: 'BABEL_PARSE_ERROR' }
error Command failed with exit code 1.

@necolas
Copy link
Owner Author

Choose a reason for hiding this comment

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

OK figured it out, I needed to include --root-mode upwards in the CLI command rather than config

Please sign in to comment.