Skip to content

Commit 209bd3a

Browse files
necolasnecolas
committed
[fix] babel-plugin support for 'react-native-web' module name
Now rewrites import/export/require statements from 'react-native-web'. Install the plugin in the 'benchmarks' package.
1 parent 46e77d0 commit 209bd3a

File tree

13 files changed

+353
-349
lines changed

13 files changed

+353
-349
lines changed

‎.babelrc

Lines changed: 1 addition & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,5 @@
11
{
22
"presets": [
3-
[
4-
"babel-preset-env",
5-
{
6-
"loose": true,
7-
"exclude": ["transform-es2015-typeof-symbol"],
8-
"targets": {
9-
"browsers": [
10-
"chrome 38",
11-
"android 4",
12-
"firefox 40",
13-
"ios_saf 7",
14-
"safari 7",
15-
"ie 10",
16-
"ie_mob 11",
17-
"edge 12",
18-
"opera 16",
19-
"op_mini 12",
20-
"and_uc 9",
21-
"and_chr 38"
22-
]
23-
}
24-
}
25-
],
26-
"babel-preset-react",
27-
"babel-preset-flow"
28-
],
29-
"plugins": [
30-
["babel-plugin-transform-class-properties", { "loose": true }],
31-
["babel-plugin-transform-object-rest-spread", { "useBuiltIns": true }],
32-
["babel-plugin-transform-react-remove-prop-types", { "mode": "wrap" } ]
3+
"./scripts/babel/preset"
334
]
345
}

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"scripts": {
55
"benchmark": "cd packages/benchmarks && yarn benchmark",
66
"clean": "del ./packages/*/dist",
7-
"compile": "yarn clean && cd packages/react-native-web && babel src --optional runtime --out-dir dist --ignore \"__tests__\"",
7+
"compile": "yarn clean && cd packages/react-native-web && babel src --out-dir dist --ignore \"**/__tests__\"",
88
"docs:start": "cd website && yarn start",
99
"docs:release": "cd website && yarn release",
1010
"flow": "flow",

‎packages/babel-plugin-react-native-web/src/__tests__/__snapshots__/index-test.js.snap

Lines changed: 47 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -1,161 +1,91 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`1. Rewrite react-native paths for react-native-web 1`] = `
3+
exports[`export from "react-native" 1`] = `
44
"
5-
import { View } from 'react-native';
5+
export { View } from 'react-native';
6+
export { ColorPropType, StyleSheet, Text, createElement } from 'react-native';
67
78
↓ ↓ ↓ ↓ ↓ ↓
89
9-
import View from 'react-native-web/dist/components/View';
10+
export { default as View } from 'react-native-web/dist/components/View';
11+
export { default as ColorPropType } from 'react-native-web/dist/propTypes/ColorPropType';
12+
export { default as StyleSheet } from 'react-native-web/dist/apis/StyleSheet';
13+
export { default as Text } from 'react-native-web/dist/components/Text';
14+
export { default as createElement } from 'react-native-web/dist/modules/createElement';
1015
"
1116
`;
1217

13-
exports[`2. Rewrite react-native paths for react-native-web 1`] = `
18+
exports[`export from "react-native-web" 1`] = `
1419
"
15-
import { Switch, Text, View as MyView, ViewPropTypes } from 'react-native';
20+
export { View } from 'react-native-web';
21+
export { ColorPropType, StyleSheet, Text, createElement } from 'react-native-web';
1622
1723
↓ ↓ ↓ ↓ ↓ ↓
1824
19-
import Switch from 'react-native-web/dist/components/Switch';
20-
import Text from 'react-native-web/dist/components/Text';
21-
import MyView from 'react-native-web/dist/components/View';
22-
import ViewPropTypes from 'react-native-web/dist/components/View/ViewPropTypes';
25+
export { default as View } from 'react-native-web/dist/components/View';
26+
export { default as ColorPropType } from 'react-native-web/dist/propTypes/ColorPropType';
27+
export { default as StyleSheet } from 'react-native-web/dist/apis/StyleSheet';
28+
export { default as Text } from 'react-native-web/dist/components/Text';
29+
export { default as createElement } from 'react-native-web/dist/modules/createElement';
2330
"
2431
`;
2532

26-
exports[`3. Rewrite react-native paths for react-native-web 1`] = `
33+
exports[`import from "native-native" 1`] = `
2734
"
28-
import { createElement, Switch, StyleSheet } from 'react-native';
35+
import ReactNative from 'react-native';
36+
import { View } from 'react-native';
37+
import { Invalid, View as MyView, ViewPropTypes } from 'react-native';
38+
import * as ReactNativeModules from 'react-native';
2939
3040
↓ ↓ ↓ ↓ ↓ ↓
3141
32-
import createElement from 'react-native-web/dist/modules/createElement';
33-
import Switch from 'react-native-web/dist/components/Switch';
34-
import StyleSheet from 'react-native-web/dist/apis/StyleSheet';
42+
import ReactNative from 'react-native-web/dist/index';
43+
import View from 'react-native-web/dist/components/View';
44+
import { Invalid } from 'react-native-web/dist/index';
45+
import MyView from 'react-native-web/dist/components/View';
46+
import ViewPropTypes from 'react-native-web/dist/components/View/ViewPropTypes';
47+
import * as ReactNativeModules from 'react-native-web/dist/index';
3548
"
3649
`;
3750

38-
exports[`4. Rewrite react-native paths for react-native-web 1`] = `
51+
exports[`import from "react-native-web" 1`] = `
3952
"
40-
import { InvalidThing, TouchableOpacity } from 'react-native';
53+
import { createElement } from 'react-native-web';
54+
import { ColorPropType, StyleSheet, View, TouchableOpacity, processColor } from 'react-native-web';
55+
import * as ReactNativeModules from 'react-native-web';
4156
4257
↓ ↓ ↓ ↓ ↓ ↓
4358
44-
import { InvalidThing } from 'react-native-web';
59+
import createElement from 'react-native-web/dist/modules/createElement';
60+
import ColorPropType from 'react-native-web/dist/propTypes/ColorPropType';
61+
import StyleSheet from 'react-native-web/dist/apis/StyleSheet';
62+
import View from 'react-native-web/dist/components/View';
4563
import TouchableOpacity from 'react-native-web/dist/components/Touchable/TouchableOpacity';
64+
import processColor from 'react-native-web/dist/modules/processColor';
65+
import * as ReactNativeModules from 'react-native-web/dist/index';
4666
"
4767
`;
4868

49-
exports[`5. Rewrite react-native paths for react-native-web 1`] = `
50-
"
51-
import * as RNW from 'react-native';
52-
53-
↓ ↓ ↓ ↓ ↓ ↓
54-
55-
import * as RNW from 'react-native-web';
56-
"
57-
`;
58-
59-
exports[`6. Rewrite react-native paths for react-native-web 1`] = `
60-
"
61-
const { View } = require('react-native');
62-
63-
↓ ↓ ↓ ↓ ↓ ↓
64-
65-
const View = require('react-native-web/dist/components/View');
66-
"
67-
`;
68-
69-
exports[`7. Rewrite react-native paths for react-native-web 1`] = `
70-
"
71-
let { Switch, Text, View: MyView } = require('react-native');
72-
73-
↓ ↓ ↓ ↓ ↓ ↓
74-
75-
let Switch = require('react-native-web/dist/components/Switch');
76-
77-
let Text = require('react-native-web/dist/components/Text');
78-
79-
let MyView = require('react-native-web/dist/components/View');
80-
"
81-
`;
82-
83-
exports[`8. Rewrite react-native paths for react-native-web 1`] = `
69+
exports[`require "react-native-web" 1`] = `
8470
"
85-
var { createElement, Switch, StyleSheet } = require('react-native');
71+
const ReactNative = require('react-native-web');
72+
const { createElement } = require('react-native-web');
73+
const { ColorPropType, StyleSheet, View, TouchableOpacity, processColor } = require('react-native-web');
8674
8775
↓ ↓ ↓ ↓ ↓ ↓
8876
89-
var createElement = require('react-native-web/dist/modules/createElement');
77+
const ReactNative = require('react-native-web');
9078
91-
var Switch = require('react-native-web/dist/components/Switch');
79+
const createElement = require('react-native-web/dist/modules/createElement');
9280
93-
var StyleSheet = require('react-native-web/dist/apis/StyleSheet');
94-
"
95-
`;
81+
const ColorPropType = require('react-native-web/dist/propTypes/ColorPropType');
9682
97-
exports[`9. Rewrite react-native paths for react-native-web 1`] = `
98-
"
99-
const { InvalidThing, TouchableOpacity } = require('react-native');
83+
const StyleSheet = require('react-native-web/dist/apis/StyleSheet');
10084
101-
↓ ↓ ↓ ↓ ↓ ↓
85+
const View = require('react-native-web/dist/components/View');
10286
10387
const TouchableOpacity = require('react-native-web/dist/components/Touchable/TouchableOpacity');
104-
"
105-
`;
106-
107-
exports[`10. Rewrite react-native paths for react-native-web 1`] = `
108-
"
109-
export { View } from 'react-native';
110-
111-
↓ ↓ ↓ ↓ ↓ ↓
112-
113-
export { default as View } from 'react-native-web/dist/components/View';
114-
"
115-
`;
116-
117-
exports[`11. Rewrite react-native paths for react-native-web 1`] = `
118-
"
119-
export { Switch, Text, View as MyView, ViewPropTypes } from 'react-native';
120-
121-
↓ ↓ ↓ ↓ ↓ ↓
122-
123-
export { default as Switch } from 'react-native-web/dist/components/Switch';
124-
export { default as Text } from 'react-native-web/dist/components/Text';
125-
export { default as MyView } from 'react-native-web/dist/components/View';
126-
export { default as ViewPropTypes } from 'react-native-web/dist/components/View/ViewPropTypes';
127-
"
128-
`;
129-
130-
exports[`12. Rewrite react-native paths for react-native-web 1`] = `
131-
"
132-
export { createElement, Switch, StyleSheet } from 'react-native';
133-
134-
↓ ↓ ↓ ↓ ↓ ↓
135-
136-
export { default as createElement } from 'react-native-web/dist/modules/createElement';
137-
export { default as Switch } from 'react-native-web/dist/components/Switch';
138-
export { default as StyleSheet } from 'react-native-web/dist/apis/StyleSheet';
139-
"
140-
`;
141-
142-
exports[`13. Rewrite react-native paths for react-native-web 1`] = `
143-
"
144-
export { InvalidThing, TouchableOpacity } from 'react-native';
145-
146-
↓ ↓ ↓ ↓ ↓ ↓
147-
148-
export { InvalidThing } from 'react-native-web';
149-
export { default as TouchableOpacity } from 'react-native-web/dist/components/Touchable/TouchableOpacity';
150-
"
151-
`;
152-
153-
exports[`14. Rewrite react-native paths for react-native-web 1`] = `
154-
"
155-
export { default as RNW } from 'react-native';
156-
157-
↓ ↓ ↓ ↓ ↓ ↓
15888
159-
export { default as RNW } from 'react-native-web';
89+
const processColor = require('react-native-web/dist/modules/processColor');
16090
"
16191
`;

‎packages/babel-plugin-react-native-web/src/__tests__/index-test.js

Lines changed: 39 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,45 @@
11
const plugin = require('..');
22
const pluginTester = require('babel-plugin-tester');
33

4+
const tests = [
5+
// import react-native
6+
{
7+
title: 'import from "native-native"',
8+
code: `import ReactNative from 'react-native';
9+
import { View } from 'react-native';
10+
import { Invalid, View as MyView, ViewPropTypes } from 'react-native';
11+
import * as ReactNativeModules from 'react-native';`,
12+
snapshot: true
13+
},
14+
{
15+
title: 'import from "react-native-web"',
16+
code: `import { createElement } from 'react-native-web';
17+
import { ColorPropType, StyleSheet, View, TouchableOpacity, processColor } from 'react-native-web';
18+
import * as ReactNativeModules from 'react-native-web';`,
19+
snapshot: true
20+
},
21+
{
22+
title: 'export from "react-native"',
23+
code: `export { View } from 'react-native';
24+
export { ColorPropType, StyleSheet, Text, createElement } from 'react-native';`,
25+
snapshot: true
26+
},
27+
{
28+
title: 'export from "react-native-web"',
29+
code: `export { View } from 'react-native-web';
30+
export { ColorPropType, StyleSheet, Text, createElement } from 'react-native-web';`,
31+
snapshot: true
32+
},
33+
{
34+
title: 'require "react-native-web"',
35+
code: `const ReactNative = require('react-native-web');
36+
const { createElement } = require('react-native-web');
37+
const { ColorPropType, StyleSheet, View, TouchableOpacity, processColor } = require('react-native-web');`,
38+
snapshot: true
39+
}
40+
];
41+
442
pluginTester({
543
plugin,
6-
snapshot: true,
7-
tests: [
8-
// import react-native
9-
"import { View } from 'react-native';",
10-
"import { Switch, Text, View as MyView, ViewPropTypes } from 'react-native';",
11-
"import { createElement, Switch, StyleSheet } from 'react-native';",
12-
"import { InvalidThing, TouchableOpacity } from 'react-native';",
13-
"import * as RNW from 'react-native';",
14-
15-
// import react-native-web
16-
// "import { View } from 'react-native-web';",
17-
// "import { Switch, Text, View as MyView } from 'react-native-web';",
18-
// "import { createElement, Switch, StyleSheet } from 'react-native-web';",
19-
// "import { InvalidThing, TouchableOpacity } from 'react-native-web';",
20-
// "import * as RNW from 'react-native-web';",
21-
22-
// require react-native
23-
"const { View } = require('react-native');",
24-
"let { Switch, Text, View: MyView } = require('react-native');",
25-
"var { createElement, Switch, StyleSheet } = require('react-native');",
26-
"const { InvalidThing, TouchableOpacity } = require('react-native');",
27-
28-
// require react-native-web
29-
// "const { View } = require('react-native-web');",
30-
// "let { Switch, Text, View: MyView } = require('react-native-web');",
31-
// "var { createElement, Switch, StyleSheet } = require('react-native-web');",
32-
// "const { InvalidThing, TouchableOpacity } = require('react-native-web');",
33-
34-
// export react-native
35-
"export { View } from 'react-native';",
36-
"export { Switch, Text, View as MyView, ViewPropTypes } from 'react-native';",
37-
"export { createElement, Switch, StyleSheet } from 'react-native';",
38-
"export { InvalidThing, TouchableOpacity } from 'react-native';",
39-
"export { default as RNW } from 'react-native';",
40-
{
41-
code: "const RNW = require('react-native');",
42-
output: "const RNW = require('react-native');",
43-
snapshot: false
44-
}
45-
]
44+
tests
4645
});

0 commit comments

Comments
 (0)