From 86ff94e65ba7a03dbe809aef2d99f37cc258585f Mon Sep 17 00:00:00 2001 From: krister Date: Fri, 23 Mar 2018 22:38:41 +0200 Subject: [PATCH 1/2] Return early if object does not have parsed media queries --- benchmark.js | 295 +++++++++++++++++++++++++++++++++++++++ src/index.js | 6 + src/perf-tests/parsed.js | 6 + 3 files changed, 307 insertions(+) diff --git a/benchmark.js b/benchmark.js index 615248a..12efb5f 100644 --- a/benchmark.js +++ b/benchmark.js @@ -316,6 +316,292 @@ var styles = { } }; +var stylesWithoutMediaQueries = { + header: { + width: "90%", + maxWidth: 1104, + marginTop: 0, + marginRight: "auto", + marginBottom: 0, + marginLeft: "auto", + paddingTop: 46, + paddingRight: 30, + paddingBottom: 30, + paddingLeft: 30, + flexGrow: 1, + flexShrink: 1, + flexBasis: 0, + flexDirection: "row" + }, + headerHeadings: { + flexGrow: 1, + flexShrink: 1, + flexBasis: 0, + flexDirection: "column" + }, + headerSpan: { + fontSize: 16, + fontWeight: "700", + letterSpacing: 8, + paddingTop: 0, + paddingRight: 0, + paddingBottom: 9.6, + paddingLeft: 1.6, + color: "#47a3da", + fontFamily: "Arial" + }, + headerNav: { display: "flex", flexDirection: "row", alignItems: "center" }, + headerNavItem: { + width: 40, + height: 40, + backgroundColor: "#fff", + borderRadius: 20, + marginTop: 0, + marginRight: 6.4, + marginBottom: 0, + marginLeft: 1.6, + borderWidth: 4, + borderStyle: "solid", + borderColor: "#47a3da", + display: "flex", + justifyContent: "center", + alignItems: "center" + }, + h1: { + fontSize: 34, + lineHeight: 44, + marginTop: 0, + marginRight: 0, + marginBottom: 20, + marginLeft: 0, + fontWeight: "400", + color: "#47a3da", + fontFamily: "Arial" + }, + contentSection: { + paddingTop: 48, + paddingRight: 16, + paddingBottom: 48, + paddingLeft: 16, + width: "100%", + maxWidth: 1230, + marginTop: 0, + marginRight: "auto", + marginBottom: 0, + marginLeft: "auto", + flexGrow: 1, + flexShrink: 1, + flexBasis: 0, + flexDirection: "row" + }, + tabsWrapper: { + marginTop: 16, + marginRight: 0, + marginBottom: 32, + marginLeft: 0 + }, + tabs: { width: "100%", marginBottom: 3, position: "relative" }, + bottomBorder: { + height: 1, + width: "100%", + backgroundColor: "#47a3da", + position: "absolute", + bottom: 0, + left: 0, + zIndex: -1 + }, + ul: { + flexGrow: 1, + flexShrink: 1, + flexBasis: 0, + flexDirection: "row", + marginLeft: "auto", + marginRight: "auto" + }, + li: { + borderWidth: 1, + borderStyle: "solid", + borderColor: "#becbd2", + borderBottomColor: "#47a3da", + marginTop: 0, + marginRight: 4, + marginBottom: 0, + marginLeft: 4, + backgroundColor: "#fff" + }, + liCurrent: { + borderWidth: 1, + borderStyle: "solid", + borderColor: "#47a3da", + borderTopWidth: 3, + borderBottomColor: "#fff", + marginTop: 0, + marginRight: 4, + marginBottom: 0, + marginLeft: 4, + backgroundColor: "#fff", + zIndex: 1 + }, + icon: { marginTop: -4, marginRight: 9, marginBottom: 0, marginLeft: 0 }, + link: { + height: 54, + paddingTop: 0, + paddingRight: 29, + paddingBottom: 0, + paddingLeft: 29, + flexGrow: 1, + flexShrink: 1, + flexBasis: 0, + flexDirection: "row", + alignItems: "center" + }, + liCurrentLinkText: { fontSize: 23.2, color: "#47a3da", fontFamily: "Arial" }, + linkText: { fontSize: 23.2, color: "#becbd2", fontFamily: "Arial" }, + mediabox: { + width: "33%", + flexBasis: "33%", + marginTop: 10, + marginRight: 0, + marginBottom: 10, + marginLeft: 0, + paddingTop: 0, + paddingRight: 25, + paddingBottom: 0, + paddingLeft: 25 + }, + imgWrapper: { position: "relative", height: 0, paddingTop: "54.39%" }, + img: { + position: "absolute", + top: 0, + right: 0, + bottom: 0, + left: 0, + width: "auto", + maxWidth: "100%", + resizeMode: "cover" + }, + h3: { + fontSize: 23, + marginTop: 18, + marginRight: 0, + marginBottom: 12, + marginLeft: 0, + color: "#47a3da", + fontWeight: "700", + fontFamily: "Arial" + }, + p: { + fontSize: 20, + paddingTop: 0, + paddingRight: 0, + paddingBottom: 16, + paddingLeft: 0, + marginTop: 0, + marginRight: 0, + marginBottom: 0, + marginLeft: 0, + lineHeight: 24, + color: "#47a3da", + fontFamily: "Arial" + }, + info: { + paddingTop: 20, + paddingRight: 20, + paddingBottom: 20, + paddingLeft: 20 + }, + infoText: { fontSize: 16, textAlign: "center", color: "#47a3da" }, + infoLink: { color: "#ccc" }, + "@media screen and (max-width: 55rem)": { + header: { flexDirection: "column", alignItems: "center" }, + headerSpan: { textAlign: "center" }, + h1: { textAlign: "center" } + }, + "@media screen and (max-width: 52.375rem)": { + liCurrentLinkText: { display: "none" }, + linkText: { display: "none" }, + icon: { marginRight: 0 }, + contentSection: { flexDirection: "column" }, + mediabox: { + paddingTop: 0, + paddingRight: 0, + paddingBottom: 35, + paddingLeft: 0, + flexDirection: "row", + width: "100%" + }, + imgWrapper: { + marginTop: 0, + marginRight: 25, + marginBottom: 10, + marginLeft: 0, + width: "40%", + paddingTop: "22.39%" + }, + textWrapper: { width: "58%" }, + h3: { marginTop: 0, fontSize: 21 }, + p: { fontSize: 18 } + }, + "@media screen and (max-width: 32rem)": { + ul: { + width: "100%", + paddingTop: 0, + paddingRight: 0, + paddingBottom: 0, + paddingLeft: 0 + }, + link: { + width: "100%", + paddingTop: 0, + paddingRight: 0, + paddingBottom: 0, + paddingLeft: 0, + justifyContent: "center" + }, + li: { + flexGrow: 1, + flexBasis: "20%", + marginTop: 0, + marginRight: 0, + marginBottom: 0, + marginLeft: -1 + }, + liCurrent: { + flexGrow: 1, + flexBasis: "20%", + marginTop: 0, + marginRight: 0, + marginBottom: 0, + marginLeft: -1 + }, + contentSection: { flexDirection: "column" }, + mediabox: { width: "100%", flexBasis: "100%", flexDirection: "column" }, + imgWrapper: { width: "100%", maxWidth: "100%", paddingTop: "54.39%" }, + textWrapper: { width: "100%" }, + img: { + marginTop: 0, + marginRight: "auto", + marginBottom: 0, + marginLeft: "auto", + maxWidth: "100%" + }, + h3: { + marginTop: 20, + marginRight: 0, + marginBottom: 16, + marginLeft: 0, + textAlign: "center" + }, + p: { + marginTop: 0, + marginRight: 0, + marginBottom: 0, + marginLeft: 0, + textAlign: "center" + } + } +}; + var portrait = { width: 420, height: 690 @@ -343,6 +629,9 @@ suite .add("already parsed queries", function() { parsed(styles, portrait, Platform); }) + .add("already parsed queries, return early", function() { + parsed(stylesWithoutMediaQueries, portrait, Platform); + }) .on("cycle", function(event) { console.log(String(event.target)); }) @@ -376,6 +665,12 @@ suite2 parsed(styles, portrait, Platform); parsed(styles, landscape, Platform); }) + .add("orientation change: already parsed queries, return early", function() { + parsed(stylesWithoutMediaQueries, portrait, Platform); + parsed(stylesWithoutMediaQueries, landscape, Platform); + parsed(stylesWithoutMediaQueries, portrait, Platform); + parsed(stylesWithoutMediaQueries, landscape, Platform); + }) .on("cycle", function(event) { console.log(String(event.target)); }) diff --git a/src/index.js b/src/index.js index 0d1e38a..ada90a3 100644 --- a/src/index.js +++ b/src/index.js @@ -40,6 +40,12 @@ const mFilterNonMq = memoize(filterNonMq); const mOmit = memoize(omit); export function process(obj) { + const hasParsedMQs = "__mediaQueries" in obj; + + if (!hasParsedMQs) { + return; + } + const mqKeys = mFilterMq(obj); let res = mFilterNonMq(obj); diff --git a/src/perf-tests/parsed.js b/src/perf-tests/parsed.js index efab4d3..56f3c81 100644 --- a/src/perf-tests/parsed.js +++ b/src/perf-tests/parsed.js @@ -39,6 +39,12 @@ const mFilterNonMq = memoize(filterNonMq); const mOmit = memoize(omit); export function process(obj, matchObject, Platform) { + const hasParsedMQs = "__mediaQueries" in obj; + + if (!hasParsedMQs) { + return; + } + const mqKeys = mFilterMq(obj); let res = mFilterNonMq(obj); From 672ddc091c734b62eba923b1c881d3f7c411f823 Mon Sep 17 00:00:00 2001 From: krister Date: Fri, 23 Mar 2018 22:42:45 +0200 Subject: [PATCH 2/2] Return object when returning early --- src/__tests__/index.spec.js | 4 ++++ src/index.js | 2 +- src/perf-tests/parsed.js | 2 +- 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/__tests__/index.spec.js b/src/__tests__/index.spec.js index 919ef54..c1f433d 100644 --- a/src/__tests__/index.spec.js +++ b/src/__tests__/index.spec.js @@ -68,6 +68,10 @@ describe("media queries", () => { }); }); + it("should return the same object if there are no parsed media queries", () => { + expect(process({ a: 1 })).toEqual({ a: 1 }); + }); + it("should not modify passed in object", () => { const styles = { __mediaQueries: { diff --git a/src/index.js b/src/index.js index ada90a3..6e10d14 100644 --- a/src/index.js +++ b/src/index.js @@ -43,7 +43,7 @@ export function process(obj) { const hasParsedMQs = "__mediaQueries" in obj; if (!hasParsedMQs) { - return; + return obj; } const mqKeys = mFilterMq(obj); diff --git a/src/perf-tests/parsed.js b/src/perf-tests/parsed.js index 56f3c81..5c21069 100644 --- a/src/perf-tests/parsed.js +++ b/src/perf-tests/parsed.js @@ -42,7 +42,7 @@ export function process(obj, matchObject, Platform) { const hasParsedMQs = "__mediaQueries" in obj; if (!hasParsedMQs) { - return; + return obj; } const mqKeys = mFilterMq(obj);