Skip to content

Commit c4fea36

Browse files
kristerkarikristerkari
authored
Merge pull request #1 from kristerkari/feature/refactor
Refactor
2 parents 3239673 + d237759 commit c4fea36

File tree

11 files changed

+649
-215
lines changed

11 files changed

+649
-215
lines changed

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ yarn add react-native-css-media-query-processor --dev
2525

2626
You can use this library together with [css-to-react-native-transform](https://github.com/kristerkari/css-to-react-native-transform) to transform a string of CSS containing media queries to an React Native style object.
2727

28+
Notice that there is no syntax validation for CSS media queries. This is done to ensure that the media query matching is as fast as possible. If you want to validate the media queries, you should do that when they are parsed to style objects (that's what [css-to-react-native-transform](https://github.com/kristerkari/css-to-react-native-transform) does).
29+
2830
Given that React Native returns the following dimensions:
2931

3032
```js

‎benchmark.js‎

Lines changed: 352 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,352 @@
1+
var Benchmark = require("benchmark");
2+
var suite = new Benchmark.Suite();
3+
var suite2 = new Benchmark.Suite();
4+
5+
var current = require("./dist/perf-tests/current").process;
6+
var memoized = require("./dist/perf-tests/memoized").process;
7+
var optimized = require("./dist/perf-tests/optimized").process;
8+
9+
var styles = {
10+
header: {
11+
width: "90%",
12+
maxWidth: 1104,
13+
marginTop: 0,
14+
marginRight: "auto",
15+
marginBottom: 0,
16+
marginLeft: "auto",
17+
paddingTop: 46,
18+
paddingRight: 30,
19+
paddingBottom: 30,
20+
paddingLeft: 30,
21+
flexGrow: 1,
22+
flexShrink: 1,
23+
flexBasis: 0,
24+
flexDirection: "row"
25+
},
26+
headerHeadings: {
27+
flexGrow: 1,
28+
flexShrink: 1,
29+
flexBasis: 0,
30+
flexDirection: "column"
31+
},
32+
headerSpan: {
33+
fontSize: 16,
34+
fontWeight: "700",
35+
letterSpacing: 8,
36+
paddingTop: 0,
37+
paddingRight: 0,
38+
paddingBottom: 9.6,
39+
paddingLeft: 1.6,
40+
color: "#47a3da",
41+
fontFamily: "Arial"
42+
},
43+
headerNav: { display: "flex", flexDirection: "row", alignItems: "center" },
44+
headerNavItem: {
45+
width: 40,
46+
height: 40,
47+
backgroundColor: "#fff",
48+
borderRadius: 20,
49+
marginTop: 0,
50+
marginRight: 6.4,
51+
marginBottom: 0,
52+
marginLeft: 1.6,
53+
borderWidth: 4,
54+
borderStyle: "solid",
55+
borderColor: "#47a3da",
56+
display: "flex",
57+
justifyContent: "center",
58+
alignItems: "center"
59+
},
60+
h1: {
61+
fontSize: 34,
62+
lineHeight: 44,
63+
marginTop: 0,
64+
marginRight: 0,
65+
marginBottom: 20,
66+
marginLeft: 0,
67+
fontWeight: "400",
68+
color: "#47a3da",
69+
fontFamily: "Arial"
70+
},
71+
contentSection: {
72+
paddingTop: 48,
73+
paddingRight: 16,
74+
paddingBottom: 48,
75+
paddingLeft: 16,
76+
width: "100%",
77+
maxWidth: 1230,
78+
marginTop: 0,
79+
marginRight: "auto",
80+
marginBottom: 0,
81+
marginLeft: "auto",
82+
flexGrow: 1,
83+
flexShrink: 1,
84+
flexBasis: 0,
85+
flexDirection: "row"
86+
},
87+
tabsWrapper: {
88+
marginTop: 16,
89+
marginRight: 0,
90+
marginBottom: 32,
91+
marginLeft: 0
92+
},
93+
tabs: { width: "100%", marginBottom: 3, position: "relative" },
94+
bottomBorder: {
95+
height: 1,
96+
width: "100%",
97+
backgroundColor: "#47a3da",
98+
position: "absolute",
99+
bottom: 0,
100+
left: 0,
101+
zIndex: -1
102+
},
103+
ul: {
104+
flexGrow: 1,
105+
flexShrink: 1,
106+
flexBasis: 0,
107+
flexDirection: "row",
108+
marginLeft: "auto",
109+
marginRight: "auto"
110+
},
111+
li: {
112+
borderWidth: 1,
113+
borderStyle: "solid",
114+
borderColor: "#becbd2",
115+
borderBottomColor: "#47a3da",
116+
marginTop: 0,
117+
marginRight: 4,
118+
marginBottom: 0,
119+
marginLeft: 4,
120+
backgroundColor: "#fff"
121+
},
122+
liCurrent: {
123+
borderWidth: 1,
124+
borderStyle: "solid",
125+
borderColor: "#47a3da",
126+
borderTopWidth: 3,
127+
borderBottomColor: "#fff",
128+
marginTop: 0,
129+
marginRight: 4,
130+
marginBottom: 0,
131+
marginLeft: 4,
132+
backgroundColor: "#fff",
133+
zIndex: 1
134+
},
135+
icon: { marginTop: -4, marginRight: 9, marginBottom: 0, marginLeft: 0 },
136+
link: {
137+
height: 54,
138+
paddingTop: 0,
139+
paddingRight: 29,
140+
paddingBottom: 0,
141+
paddingLeft: 29,
142+
flexGrow: 1,
143+
flexShrink: 1,
144+
flexBasis: 0,
145+
flexDirection: "row",
146+
alignItems: "center"
147+
},
148+
liCurrentLinkText: { fontSize: 23.2, color: "#47a3da", fontFamily: "Arial" },
149+
linkText: { fontSize: 23.2, color: "#becbd2", fontFamily: "Arial" },
150+
mediabox: {
151+
width: "33%",
152+
flexBasis: "33%",
153+
marginTop: 10,
154+
marginRight: 0,
155+
marginBottom: 10,
156+
marginLeft: 0,
157+
paddingTop: 0,
158+
paddingRight: 25,
159+
paddingBottom: 0,
160+
paddingLeft: 25
161+
},
162+
imgWrapper: { position: "relative", height: 0, paddingTop: "54.39%" },
163+
img: {
164+
position: "absolute",
165+
top: 0,
166+
right: 0,
167+
bottom: 0,
168+
left: 0,
169+
width: "auto",
170+
maxWidth: "100%",
171+
resizeMode: "cover"
172+
},
173+
h3: {
174+
fontSize: 23,
175+
marginTop: 18,
176+
marginRight: 0,
177+
marginBottom: 12,
178+
marginLeft: 0,
179+
color: "#47a3da",
180+
fontWeight: "700",
181+
fontFamily: "Arial"
182+
},
183+
p: {
184+
fontSize: 20,
185+
paddingTop: 0,
186+
paddingRight: 0,
187+
paddingBottom: 16,
188+
paddingLeft: 0,
189+
marginTop: 0,
190+
marginRight: 0,
191+
marginBottom: 0,
192+
marginLeft: 0,
193+
lineHeight: 24,
194+
color: "#47a3da",
195+
fontFamily: "Arial"
196+
},
197+
info: {
198+
paddingTop: 20,
199+
paddingRight: 20,
200+
paddingBottom: 20,
201+
paddingLeft: 20
202+
},
203+
infoText: { fontSize: 16, textAlign: "center", color: "#47a3da" },
204+
infoLink: { color: "#ccc" },
205+
"@media screen and (max-width: 55rem)": {
206+
header: { flexDirection: "column", alignItems: "center" },
207+
headerSpan: { textAlign: "center" },
208+
h1: { textAlign: "center" }
209+
},
210+
"@media screen and (max-width: 52.375rem)": {
211+
liCurrentLinkText: { display: "none" },
212+
linkText: { display: "none" },
213+
icon: { marginRight: 0 },
214+
contentSection: { flexDirection: "column" },
215+
mediabox: {
216+
paddingTop: 0,
217+
paddingRight: 0,
218+
paddingBottom: 35,
219+
paddingLeft: 0,
220+
flexDirection: "row",
221+
width: "100%"
222+
},
223+
imgWrapper: {
224+
marginTop: 0,
225+
marginRight: 25,
226+
marginBottom: 10,
227+
marginLeft: 0,
228+
width: "40%",
229+
paddingTop: "22.39%"
230+
},
231+
textWrapper: { width: "58%" },
232+
h3: { marginTop: 0, fontSize: 21 },
233+
p: { fontSize: 18 }
234+
},
235+
"@media screen and (max-width: 32rem)": {
236+
ul: {
237+
width: "100%",
238+
paddingTop: 0,
239+
paddingRight: 0,
240+
paddingBottom: 0,
241+
paddingLeft: 0
242+
},
243+
link: {
244+
width: "100%",
245+
paddingTop: 0,
246+
paddingRight: 0,
247+
paddingBottom: 0,
248+
paddingLeft: 0,
249+
justifyContent: "center"
250+
},
251+
li: {
252+
flexGrow: 1,
253+
flexBasis: "20%",
254+
marginTop: 0,
255+
marginRight: 0,
256+
marginBottom: 0,
257+
marginLeft: -1
258+
},
259+
liCurrent: {
260+
flexGrow: 1,
261+
flexBasis: "20%",
262+
marginTop: 0,
263+
marginRight: 0,
264+
marginBottom: 0,
265+
marginLeft: -1
266+
},
267+
contentSection: { flexDirection: "column" },
268+
mediabox: { width: "100%", flexBasis: "100%", flexDirection: "column" },
269+
imgWrapper: { width: "100%", maxWidth: "100%", paddingTop: "54.39%" },
270+
textWrapper: { width: "100%" },
271+
img: {
272+
marginTop: 0,
273+
marginRight: "auto",
274+
marginBottom: 0,
275+
marginLeft: "auto",
276+
maxWidth: "100%"
277+
},
278+
h3: {
279+
marginTop: 20,
280+
marginRight: 0,
281+
marginBottom: 16,
282+
marginLeft: 0,
283+
textAlign: "center"
284+
},
285+
p: {
286+
marginTop: 0,
287+
marginRight: 0,
288+
marginBottom: 0,
289+
marginLeft: 0,
290+
textAlign: "center"
291+
}
292+
}
293+
};
294+
295+
var portrait = {
296+
width: 420,
297+
height: 690
298+
};
299+
300+
var landscape = {
301+
width: 690,
302+
height: 420
303+
};
304+
305+
var Platform = {
306+
OS: "ios"
307+
};
308+
309+
suite
310+
.add("current", function() {
311+
current(styles, portrait, Platform);
312+
})
313+
.add("memoized", function() {
314+
memoized(styles, portrait, Platform);
315+
})
316+
.add("optimized", function() {
317+
optimized(styles, portrait, Platform);
318+
})
319+
.on("cycle", function(event) {
320+
console.log(String(event.target));
321+
})
322+
.on("complete", function() {
323+
console.log("Fastest is " + this.filter("fastest").map("name"));
324+
})
325+
.run({ async: false });
326+
327+
suite2
328+
.add("orientation change: current", function() {
329+
current(styles, portrait, Platform);
330+
current(styles, landscape, Platform);
331+
current(styles, portrait, Platform);
332+
current(styles, landscape, Platform);
333+
})
334+
.add("orientation change: memoized", function() {
335+
memoized(styles, portrait, Platform);
336+
memoized(styles, landscape, Platform);
337+
memoized(styles, portrait, Platform);
338+
memoized(styles, landscape, Platform);
339+
})
340+
.add("orientation change: optimized", function() {
341+
optimized(styles, portrait, Platform);
342+
optimized(styles, landscape, Platform);
343+
optimized(styles, portrait, Platform);
344+
optimized(styles, landscape, Platform);
345+
})
346+
.on("cycle", function(event) {
347+
console.log(String(event.target));
348+
})
349+
.on("complete", function() {
350+
console.log("Fastest is " + this.filter("fastest").map("name"));
351+
})
352+
.run({ async: false });

‎package.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"build": "babel src --out-dir dist --ignore src/__tests__,src/__mocks__",
1010
"precommit": "lint-staged",
1111
"release": "npmpub",
12+
"benchmark": "yarn build && node benchmark.js",
1213
"test": "jest"
1314
},
1415
"author": "Krister Kari",
@@ -44,7 +45,9 @@
4445
]
4546
},
4647
"dependencies": {
47-
"css-mediaquery": "^0.1.2"
48+
"css-mediaquery": "^0.1.2",
49+
"deepmerge": "^2.1.0",
50+
"micro-memoize": "^2.0.0"
4851
},
4952
"peerDependencies": {
5053
"react-native": ">=0.45.0"
@@ -54,6 +57,7 @@
5457
"babel-core": "^6.26.0",
5558
"babel-jest": "^22.4.1",
5659
"babel-preset-es2015": "^6.24.1",
60+
"benchmark": "^2.1.4",
5761
"husky": "^0.14.3",
5862
"jest": "^22.4.2",
5963
"lint-staged": "^7.0.0",

0 commit comments

Comments
 (0)