From fe05e366e16161b1d8e81e544ab4f52a022b2a2f Mon Sep 17 00:00:00 2001 From: krister Date: Tue, 26 Jun 2018 01:15:00 +0300 Subject: [PATCH 1/2] Move match object and early returning to dynamic-style-processor --- README.md | 3 +- src/__tests__/index.spec.js | 1463 ++++++++++++++++++----------------- src/index.js | 32 +- 3 files changed, 745 insertions(+), 753 deletions(-) diff --git a/README.md b/README.md index 9282a2d..014bd41 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,6 @@ # React Native CSS Media Query processor +![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg) [![NPM version](http://img.shields.io/npm/v/react-native-css-media-query-processor.svg)](https://www.npmjs.org/package/react-native-css-media-query-processor) [![Build Status](https://travis-ci.org/kristerkari/react-native-css-media-query-processor.svg?branch=master)](https://travis-ci.org/kristerkari/react-native-css-media-query-processor) [![Build status](https://ci.appveyor.com/api/projects/status/1itowtpn7a51rc5x/branch/master?svg=true)](https://ci.appveyor.com/project/kristerkari/react-native-css-media-query-processor/branch/master) @@ -115,7 +116,7 @@ transform(styles, { parseMediaQueries: true }); ```js import { process } from "react-native-css-media-query-processor"; -process(styleObject); +process(styleObject, matchObject); ``` ↓ ↓ ↓ ↓ ↓ ↓ diff --git a/src/__tests__/index.spec.js b/src/__tests__/index.spec.js index ecec6e9..895a4a9 100644 --- a/src/__tests__/index.spec.js +++ b/src/__tests__/index.spec.js @@ -1,14 +1,31 @@ import memoize from "micro-memoize"; +function omit(obj, omitKey) { + return Object.keys(obj).reduce((result, key) => { + if (key !== omitKey) { + result[key] = obj[key]; + } + return result; + }, {}); +} + +const win = { + width: 110, + height: 100 +}; + +const matchObject = { + width: win.width, + height: win.height, + orientation: win.width > win.height ? "landscape" : "portrait", + "aspect-ratio": win.width / win.height, + type: "screen" +}; + describe("media queries", () => { const rn = { Platform: { OS: "ios" - }, - Dimensions: { - get: () => { - return { width: 110, height: 100 }; - } } }; @@ -55,7 +72,8 @@ describe("media queries", () => { d: 5 } }; - expect(process(obj)).toEqual({ + const result = omit(process(obj, matchObject), "__mediaQueries"); + expect(result).toEqual({ a: 2, b: 2, c: 3, @@ -68,10 +86,6 @@ 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: { @@ -104,7 +118,7 @@ describe("media queries", () => { } }; - const result = process(styles); + const result = omit(process(styles, matchObject), "__mediaQueries"); expect(result).toEqual({ a: 1 }); expect(styles).toEqual({ @@ -175,759 +189,764 @@ describe("media queries", () => { }; const mstyles = memoize(styles); - expect(process(mstyles(0))).toEqual({ a: 1 }); + const result = omit(process(mstyles(0), matchObject), "__mediaQueries"); + expect(result).toEqual({ a: 1 }); }); it("should process width", () => { - expect( - process({ - __mediaQueries: { - "@media (min-width: 50px) and (max-width: 150px)": [ - { - inverse: false, - type: "all", - expressions: [ - { modifier: "min", feature: "width", value: "50px" }, - { modifier: "max", feature: "width", value: "150px" } - ] - } - ], - "@media (min-width: 150px) and (max-width: 200px)": [ - { - inverse: false, - type: "all", - expressions: [ - { modifier: "min", feature: "width", value: "150px" }, - { modifier: "max", feature: "width", value: "200px" } - ] - } - ] - }, - "@media (min-width: 50px) and (max-width: 150px)": { - a: 1 - }, - "@media (min-width: 150px) and (max-width: 200px)": { - a: 2 - } - }) - ).toEqual({ a: 1 }); + const styles = { + __mediaQueries: { + "@media (min-width: 50px) and (max-width: 150px)": [ + { + inverse: false, + type: "all", + expressions: [ + { modifier: "min", feature: "width", value: "50px" }, + { modifier: "max", feature: "width", value: "150px" } + ] + } + ], + "@media (min-width: 150px) and (max-width: 200px)": [ + { + inverse: false, + type: "all", + expressions: [ + { modifier: "min", feature: "width", value: "150px" }, + { modifier: "max", feature: "width", value: "200px" } + ] + } + ] + }, + "@media (min-width: 50px) and (max-width: 150px)": { + a: 1 + }, + "@media (min-width: 150px) and (max-width: 200px)": { + a: 2 + } + }; + const result = omit(process(styles, matchObject), "__mediaQueries"); + expect(result).toEqual({ a: 1 }); }); it("should process height", () => { - expect( - process({ - __mediaQueries: { - "@media (min-height: 50px) and (max-height: 150px)": [ - { - inverse: false, - type: "all", - expressions: [ - { modifier: "min", feature: "height", value: "50px" }, - { modifier: "max", feature: "height", value: "150px" } - ] - } - ], - "@media (min-height: 150px) and (max-height: 200px)": [ - { - inverse: false, - type: "all", - expressions: [ - { modifier: "min", feature: "height", value: "150px" }, - { modifier: "max", feature: "height", value: "200px" } - ] - } - ] - }, - "@media (min-height: 50px) and (max-height: 150px)": { - a: 1 - }, - "@media (min-height: 150px) and (max-height: 200px)": { - a: 2 - } - }) - ).toEqual({ a: 1 }); + const styles = { + __mediaQueries: { + "@media (min-height: 50px) and (max-height: 150px)": [ + { + inverse: false, + type: "all", + expressions: [ + { modifier: "min", feature: "height", value: "50px" }, + { modifier: "max", feature: "height", value: "150px" } + ] + } + ], + "@media (min-height: 150px) and (max-height: 200px)": [ + { + inverse: false, + type: "all", + expressions: [ + { modifier: "min", feature: "height", value: "150px" }, + { modifier: "max", feature: "height", value: "200px" } + ] + } + ] + }, + "@media (min-height: 50px) and (max-height: 150px)": { + a: 1 + }, + "@media (min-height: 150px) and (max-height: 200px)": { + a: 2 + } + }; + const result = omit(process(styles, matchObject), "__mediaQueries"); + expect(result).toEqual({ a: 1 }); }); it("should support rem", () => { - expect( - process({ - __mediaQueries: { - "@media (min-height: 3.125rem) and (max-height: 9.375rem)": [ - { - inverse: false, - type: "all", - expressions: [ - { modifier: "min", feature: "height", value: "3.125rem" }, - { modifier: "max", feature: "height", value: "9.375rem" } - ] - } - ], - "@media (min-height: 9.375rem) and (max-height: 12.5rem)": [ - { - inverse: false, - type: "all", - expressions: [ - { modifier: "min", feature: "height", value: "9.375rem" }, - { modifier: "max", feature: "height", value: "12.5rem" } - ] - } - ] - }, - "@media (min-height: 3.125rem) and (max-height: 9.375rem)": { - a: 1 - }, - "@media (min-height: 9.375rem) and (max-height: 12.5rem)": { - a: 2 - } - }) - ).toEqual({ a: 1 }); - expect( - process({ - __mediaQueries: { - "@media screen and (min-height: 9.375rem) and (max-height: 12.5rem)": [ - { - inverse: false, - type: "screen", - expressions: [ - { modifier: "min", feature: "height", value: "9.375rem" }, - { modifier: "max", feature: "height", value: "12.5rem" } - ] - } - ], - "@media screen and (min-height: 3.125rem) and (max-height: 9.375rem)": [ - { - inverse: false, - type: "screen", - expressions: [ - { modifier: "min", feature: "height", value: "3.125rem" }, - { modifier: "max", feature: "height", value: "9.375rem" } - ] - } - ] - }, - a: 0, - "@media screen and (min-height: 9.375rem) and (max-height: 12.5rem)": { - a: 1 - }, - "@media screen and (min-height: 3.125rem) and (max-height: 9.375rem)": { - a: 2 - } - }) - ).toEqual({ a: 2 }); + const styles1 = { + __mediaQueries: { + "@media (min-height: 3.125rem) and (max-height: 9.375rem)": [ + { + inverse: false, + type: "all", + expressions: [ + { modifier: "min", feature: "height", value: "3.125rem" }, + { modifier: "max", feature: "height", value: "9.375rem" } + ] + } + ], + "@media (min-height: 9.375rem) and (max-height: 12.5rem)": [ + { + inverse: false, + type: "all", + expressions: [ + { modifier: "min", feature: "height", value: "9.375rem" }, + { modifier: "max", feature: "height", value: "12.5rem" } + ] + } + ] + }, + "@media (min-height: 3.125rem) and (max-height: 9.375rem)": { + a: 1 + }, + "@media (min-height: 9.375rem) and (max-height: 12.5rem)": { + a: 2 + } + }; + const result1 = omit(process(styles1, matchObject), "__mediaQueries"); + expect(result1).toEqual({ a: 1 }); + + const styles2 = { + __mediaQueries: { + "@media screen and (min-height: 9.375rem) and (max-height: 12.5rem)": [ + { + inverse: false, + type: "screen", + expressions: [ + { modifier: "min", feature: "height", value: "9.375rem" }, + { modifier: "max", feature: "height", value: "12.5rem" } + ] + } + ], + "@media screen and (min-height: 3.125rem) and (max-height: 9.375rem)": [ + { + inverse: false, + type: "screen", + expressions: [ + { modifier: "min", feature: "height", value: "3.125rem" }, + { modifier: "max", feature: "height", value: "9.375rem" } + ] + } + ] + }, + a: 0, + "@media screen and (min-height: 9.375rem) and (max-height: 12.5rem)": { + a: 1 + }, + "@media screen and (min-height: 3.125rem) and (max-height: 9.375rem)": { + a: 2 + } + }; + + const result2 = omit(process(styles2, matchObject), "__mediaQueries"); + expect(result2).toEqual({ a: 2 }); }); it("should support screen type", () => { - expect( - process({ - __mediaQueries: { - "@media screen and (min-height: 50px) and (max-height: 150px)": [ - { - inverse: false, - type: "screen", - expressions: [ - { modifier: "min", feature: "height", value: "50px" }, - { modifier: "max", feature: "height", value: "150px" } - ] - } - ], - "@media screen and (min-height: 150px) and (max-height: 200px)": [ - { - inverse: false, - type: "screen", - expressions: [ - { modifier: "min", feature: "height", value: "150px" }, - { modifier: "max", feature: "height", value: "200px" } - ] - } - ] - }, - a: 0, - "@media screen and (min-height: 50px) and (max-height: 150px)": { - a: 1 - }, - "@media screen and (min-height: 150px) and (max-height: 200px)": { - a: 2 - } - }) - ).toEqual({ a: 1 }); + const styles = { + __mediaQueries: { + "@media screen and (min-height: 50px) and (max-height: 150px)": [ + { + inverse: false, + type: "screen", + expressions: [ + { modifier: "min", feature: "height", value: "50px" }, + { modifier: "max", feature: "height", value: "150px" } + ] + } + ], + "@media screen and (min-height: 150px) and (max-height: 200px)": [ + { + inverse: false, + type: "screen", + expressions: [ + { modifier: "min", feature: "height", value: "150px" }, + { modifier: "max", feature: "height", value: "200px" } + ] + } + ] + }, + a: 0, + "@media screen and (min-height: 50px) and (max-height: 150px)": { + a: 1 + }, + "@media screen and (min-height: 150px) and (max-height: 200px)": { + a: 2 + } + }; + const result = omit(process(styles, matchObject), "__mediaQueries"); + expect(result).toEqual({ a: 1 }); }); it("should support all type", () => { - expect( - process({ - __mediaQueries: { - "@media all and (min-height: 150px) and (max-height: 200px)": [ - { - inverse: false, - type: "all", - expressions: [ - { modifier: "min", feature: "height", value: "150px" }, - { modifier: "max", feature: "height", value: "200px" } - ] - } - ], - "@media all and (min-height: 50px) and (max-height: 150px)": [ - { - inverse: false, - type: "all", - expressions: [ - { modifier: "min", feature: "height", value: "50px" }, - { modifier: "max", feature: "height", value: "150px" } - ] - } - ] - }, - a: 0, - "@media all and (min-height: 150px) and (max-height: 200px)": { - a: 1 - }, - "@media all and (min-height: 50px) and (max-height: 150px)": { - a: 2 - } - }) - ).toEqual({ a: 2 }); + const styles = { + __mediaQueries: { + "@media all and (min-height: 150px) and (max-height: 200px)": [ + { + inverse: false, + type: "all", + expressions: [ + { modifier: "min", feature: "height", value: "150px" }, + { modifier: "max", feature: "height", value: "200px" } + ] + } + ], + "@media all and (min-height: 50px) and (max-height: 150px)": [ + { + inverse: false, + type: "all", + expressions: [ + { modifier: "min", feature: "height", value: "50px" }, + { modifier: "max", feature: "height", value: "150px" } + ] + } + ] + }, + a: 0, + "@media all and (min-height: 150px) and (max-height: 200px)": { + a: 1 + }, + "@media all and (min-height: 50px) and (max-height: 150px)": { + a: 2 + } + }; + const result = omit(process(styles, matchObject), "__mediaQueries"); + expect(result).toEqual({ a: 2 }); }); it("should process mixed types", () => { - expect( - process({ - __mediaQueries: { - "@media ios": [ - { - inverse: false, - type: "ios", - expressions: [] - } - ], - "@media android": [ - { - inverse: false, - type: "android", - expressions: [] - } - ], - "@media screen and (min-width: 50px)": [ - { - inverse: false, - type: "screen", - expressions: [ - { modifier: "min", feature: "width", value: "50px" } - ] - } - ], - "@media all and (min-width: 50px)": [ - { - inverse: false, - type: "all", - expressions: [ - { modifier: "min", feature: "width", value: "50px" } - ] - } - ], - "@media (orientation: landscape)": [ - { - inverse: false, - type: "all", - expressions: [{ feature: "orientation", value: "landscape" }] - } - ] - }, - "@media ios": { - a: 1 - }, - "@media android": { - a: 2 - }, - "@media screen and (min-width: 50px)": { - b: 3 - }, - "@media all and (min-width: 50px)": { - c: 4 - }, - "@media (orientation: landscape)": { - d: 5 - } - }) - ).toEqual({ a: 1, b: 3, c: 4, d: 5 }); + const styles = { + __mediaQueries: { + "@media ios": [ + { + inverse: false, + type: "ios", + expressions: [] + } + ], + "@media android": [ + { + inverse: false, + type: "android", + expressions: [] + } + ], + "@media screen and (min-width: 50px)": [ + { + inverse: false, + type: "screen", + expressions: [{ modifier: "min", feature: "width", value: "50px" }] + } + ], + "@media all and (min-width: 50px)": [ + { + inverse: false, + type: "all", + expressions: [{ modifier: "min", feature: "width", value: "50px" }] + } + ], + "@media (orientation: landscape)": [ + { + inverse: false, + type: "all", + expressions: [{ feature: "orientation", value: "landscape" }] + } + ] + }, + "@media ios": { + a: 1 + }, + "@media android": { + a: 2 + }, + "@media screen and (min-width: 50px)": { + b: 3 + }, + "@media all and (min-width: 50px)": { + c: 4 + }, + "@media (orientation: landscape)": { + d: 5 + } + }; + const result = omit(process(styles, matchObject), "__mediaQueries"); + expect(result).toEqual({ a: 1, b: 3, c: 4, d: 5 }); }); it("should support OR queries", () => { - expect( - process({ - __mediaQueries: { - "@media all and (min-height: 150px), (max-height: 200px)": [ - { - inverse: false, - type: "all", - expressions: [ - { modifier: "min", feature: "height", value: "150px" } - ] - }, - { - inverse: false, - type: "all", - expressions: [ - { modifier: "max", feature: "height", value: "200px" } - ] - } - ], - "@media all and (min-height: 200px), (max-height: 150px)": [ - { - inverse: false, - type: "all", - expressions: [ - { modifier: "min", feature: "height", value: "200px" } - ] - }, - { - inverse: false, - type: "all", - expressions: [ - { modifier: "max", feature: "height", value: "150px" } - ] - } - ] - }, - a: 0, - "@media all and (min-height: 150px), (max-height: 200px)": { - a: 1 - }, - "@media all and (min-height: 200px), (max-height: 150px)": { - a: 2 - } - }) - ).toEqual({ a: 2 }); - expect( - process({ - __mediaQueries: { - "@media (orientation: portrait), (orientation: landscape)": [ - { - inverse: false, - type: "all", - expressions: [ - { - modifier: undefined, - feature: "orientation", - value: "portrait" - } - ] - }, - { - inverse: false, - type: "all", - expressions: [ - { - modifier: undefined, - feature: "orientation", - value: "landscape" - } - ] - } - ] - }, - a: 1, - "@media (orientation: portrait), (orientation: landscape)": { - a: 2 - } - }) - ).toEqual({ a: 2 }); + const styles1 = { + __mediaQueries: { + "@media all and (min-height: 150px), (max-height: 200px)": [ + { + inverse: false, + type: "all", + expressions: [ + { modifier: "min", feature: "height", value: "150px" } + ] + }, + { + inverse: false, + type: "all", + expressions: [ + { modifier: "max", feature: "height", value: "200px" } + ] + } + ], + "@media all and (min-height: 200px), (max-height: 150px)": [ + { + inverse: false, + type: "all", + expressions: [ + { modifier: "min", feature: "height", value: "200px" } + ] + }, + { + inverse: false, + type: "all", + expressions: [ + { modifier: "max", feature: "height", value: "150px" } + ] + } + ] + }, + a: 0, + "@media all and (min-height: 150px), (max-height: 200px)": { + a: 1 + }, + "@media all and (min-height: 200px), (max-height: 150px)": { + a: 2 + } + }; + const result1 = omit(process(styles1, matchObject), "__mediaQueries"); + expect(result1).toEqual({ a: 2 }); + + const styles2 = { + __mediaQueries: { + "@media (orientation: portrait), (orientation: landscape)": [ + { + inverse: false, + type: "all", + expressions: [ + { + modifier: undefined, + feature: "orientation", + value: "portrait" + } + ] + }, + { + inverse: false, + type: "all", + expressions: [ + { + modifier: undefined, + feature: "orientation", + value: "landscape" + } + ] + } + ] + }, + a: 1, + "@media (orientation: portrait), (orientation: landscape)": { + a: 2 + } + }; + const result2 = omit(process(styles2, matchObject), "__mediaQueries"); + expect(result2).toEqual({ a: 2 }); }); it("should process orientation", () => { - expect( - process({ - __mediaQueries: { - "@media (orientation: landscape)": [ - { - inverse: false, - type: "all", - expressions: [ - { - modifier: undefined, - feature: "orientation", - value: "landscape" - } - ] - } - ], - "@media (orientation: portrait)": [ - { - inverse: false, - type: "all", - expressions: [ - { - modifier: undefined, - feature: "orientation", - value: "portrait" - } - ] - } - ] - }, - "@media (orientation: landscape)": { - a: 1 - }, - "@media (orientation: portrait)": { - a: 2 - } - }) - ).toEqual({ a: 1 }); + const styles = { + __mediaQueries: { + "@media (orientation: landscape)": [ + { + inverse: false, + type: "all", + expressions: [ + { + modifier: undefined, + feature: "orientation", + value: "landscape" + } + ] + } + ], + "@media (orientation: portrait)": [ + { + inverse: false, + type: "all", + expressions: [ + { + modifier: undefined, + feature: "orientation", + value: "portrait" + } + ] + } + ] + }, + "@media (orientation: landscape)": { + a: 1 + }, + "@media (orientation: portrait)": { + a: 2 + } + }; + const result = omit(process(styles, matchObject), "__mediaQueries"); + expect(result).toEqual({ a: 1 }); }); it("should process type", () => { - expect( - process({ - __mediaQueries: { - "@media ios": [ - { - inverse: false, - type: "ios", - expressions: [] - } - ], - "@media android": [ - { - inverse: false, - type: "android", - expressions: [] - } - ] - }, - "@media ios": { - a: 1 - }, - "@media android": { - a: 2 - } - }) - ).toEqual({ a: 1 }); - expect( - process({ - __mediaQueries: { - "@media android": [ - { - inverse: false, - type: "android", - expressions: [] - } - ], - "@media ios": [ - { - inverse: false, - type: "ios", - expressions: [] - } - ] - }, - "@media android": { - a: 1 - }, - "@media ios": { - a: 2 - } - }) - ).toEqual({ a: 2 }); + const styles1 = { + __mediaQueries: { + "@media ios": [ + { + inverse: false, + type: "ios", + expressions: [] + } + ], + "@media android": [ + { + inverse: false, + type: "android", + expressions: [] + } + ] + }, + "@media ios": { + a: 1 + }, + "@media android": { + a: 2 + } + }; + const result1 = omit(process(styles1, matchObject), "__mediaQueries"); + expect(result1).toEqual({ a: 1 }); + + const styles2 = { + __mediaQueries: { + "@media android": [ + { + inverse: false, + type: "android", + expressions: [] + } + ], + "@media ios": [ + { + inverse: false, + type: "ios", + expressions: [] + } + ] + }, + "@media android": { + a: 1 + }, + "@media ios": { + a: 2 + } + }; + const result2 = omit(process(styles2, matchObject), "__mediaQueries"); + expect(result2).toEqual({ a: 2 }); }); it("should process media query with NOT operator and type", () => { - expect( - process({ - __mediaQueries: { - "@media not print": [ - { - inverse: true, - type: "print", - expressions: [] - } - ], - "@media print": [ - { - inverse: false, - type: "print", - expressions: [] - } - ] - }, - a: 1, - "@media not print": { - a: 2 - }, - "@media print": { - a: 3 - } - }) - ).toEqual({ a: 2 }); + const styles = { + __mediaQueries: { + "@media not print": [ + { + inverse: true, + type: "print", + expressions: [] + } + ], + "@media print": [ + { + inverse: false, + type: "print", + expressions: [] + } + ] + }, + a: 1, + "@media not print": { + a: 2 + }, + "@media print": { + a: 3 + } + }; + const result = omit(process(styles, matchObject), "__mediaQueries"); + expect(result).toEqual({ a: 2 }); }); it("should process media query with NOT and OR operators and type", () => { - expect( - process({ - __mediaQueries: { - "@media not print, (orientation: landscape)": [ - { - inverse: true, - type: "print", - expressions: [] - }, - { - expressions: [ - { - feature: "orientation", - modifier: undefined, - value: "landscape" - } - ], - inverse: false, - type: "all" - } - ], - "@media print": [ - { - inverse: false, - type: "print", - expressions: [] - } - ] - }, - a: 1, - "@media not print, (orientation: landscape)": { - a: 2 - }, - "@media print": { - a: 3 - } - }) - ).toEqual({ a: 2 }); - expect( - process({ - __mediaQueries: { - "@media not ios, (orientation: landscape)": [ - { - inverse: true, - type: "ios", - expressions: [] - }, - { - expressions: [ - { - feature: "orientation", - modifier: undefined, - value: "landscape" - } - ], - inverse: false, - type: "all" - } - ], - "@media print": [ - { - inverse: false, - type: "print", - expressions: [] - } - ] - }, - a: 1, - "@media not ios, (orientation: landscape)": { - a: 2 - }, - "@media print": { - a: 3 - } - }) - ).toEqual({ a: 2 }); - expect( - process({ - __mediaQueries: { - "@media not ios, (orientation: portrait)": [ - { - inverse: true, - type: "ios", - expressions: [] - }, - { - expressions: [ - { - feature: "orientation", - modifier: undefined, - value: "portrait" - } - ], - inverse: false, - type: "all" - } - ], - "@media print": [ - { - inverse: false, - type: "print", - expressions: [] - } - ] - }, - a: 1, - "@media not ios, (orientation: portrait)": { - a: 2 - }, - "@media print": { - a: 3 - } - }) - ).toEqual({ a: 1 }); + const styles1 = { + __mediaQueries: { + "@media not print, (orientation: landscape)": [ + { + inverse: true, + type: "print", + expressions: [] + }, + { + expressions: [ + { + feature: "orientation", + modifier: undefined, + value: "landscape" + } + ], + inverse: false, + type: "all" + } + ], + "@media print": [ + { + inverse: false, + type: "print", + expressions: [] + } + ] + }, + a: 1, + "@media not print, (orientation: landscape)": { + a: 2 + }, + "@media print": { + a: 3 + } + }; + const result1 = omit(process(styles1, matchObject), "__mediaQueries"); + expect(result1).toEqual({ a: 2 }); + + const styles2 = { + __mediaQueries: { + "@media not ios, (orientation: landscape)": [ + { + inverse: true, + type: "ios", + expressions: [] + }, + { + expressions: [ + { + feature: "orientation", + modifier: undefined, + value: "landscape" + } + ], + inverse: false, + type: "all" + } + ], + "@media print": [ + { + inverse: false, + type: "print", + expressions: [] + } + ] + }, + a: 1, + "@media not ios, (orientation: landscape)": { + a: 2 + }, + "@media print": { + a: 3 + } + }; + const result2 = omit(process(styles2, matchObject), "__mediaQueries"); + expect(result2).toEqual({ a: 2 }); + + const styles3 = { + __mediaQueries: { + "@media not ios, (orientation: portrait)": [ + { + inverse: true, + type: "ios", + expressions: [] + }, + { + expressions: [ + { + feature: "orientation", + modifier: undefined, + value: "portrait" + } + ], + inverse: false, + type: "all" + } + ], + "@media print": [ + { + inverse: false, + type: "print", + expressions: [] + } + ] + }, + a: 1, + "@media not ios, (orientation: portrait)": { + a: 2 + }, + "@media print": { + a: 3 + } + }; + const result3 = omit(process(styles3, matchObject), "__mediaQueries"); + expect(result3).toEqual({ a: 1 }); }); it("should process media query with NOT and AND operators and platform", () => { - expect( - process({ - __mediaQueries: { - "@media android": [ - { - inverse: false, - type: "android", - expressions: [] - } - ], - "@media not ios and (orientation: landscape)": [ - { - inverse: true, - type: "ios", - expressions: [ - { - feature: "orientation", - modifier: undefined, - value: "landscape" - } - ] - } - ] - }, - a: 1, - "@media android": { - a: 2 - }, - "@media not ios and (orientation: landscape)": { - a: 3 - } - }) - ).toEqual({ a: 1 }); - expect( - process({ - __mediaQueries: { - "@media android": [ - { - inverse: false, - type: "android", - expressions: [] - } - ], - "@media not ios and (orientation: portrait)": [ - { - inverse: true, - type: "ios", - expressions: [ - { - feature: "orientation", - modifier: undefined, - value: "portrait" - } - ] - } - ] - }, - a: 1, - "@media android": { - a: 2 - }, - "@media not ios and (orientation: portrait)": { - a: 4 - } - }) - ).toEqual({ a: 4 }); - expect( - process({ - __mediaQueries: { - "@media android": [ - { - inverse: false, - type: "android", - expressions: [] - } - ], - "@media not android and (orientation: portrait)": [ - { - inverse: true, - type: "android", - expressions: [ - { - feature: "orientation", - modifier: undefined, - value: "portrait" - } - ] - } - ] - }, - a: 1, - "@media android": { - a: 2 - }, - "@media not android and (orientation: portrait)": { - a: 3 - } - }) - ).toEqual({ a: 3 }); + const styles1 = { + __mediaQueries: { + "@media android": [ + { + inverse: false, + type: "android", + expressions: [] + } + ], + "@media not ios and (orientation: landscape)": [ + { + inverse: true, + type: "ios", + expressions: [ + { + feature: "orientation", + modifier: undefined, + value: "landscape" + } + ] + } + ] + }, + a: 1, + "@media android": { + a: 2 + }, + "@media not ios and (orientation: landscape)": { + a: 3 + } + }; + const result1 = omit(process(styles1, matchObject), "__mediaQueries"); + + expect(result1).toEqual({ a: 1 }); + + const styles2 = { + __mediaQueries: { + "@media android": [ + { + inverse: false, + type: "android", + expressions: [] + } + ], + "@media not ios and (orientation: portrait)": [ + { + inverse: true, + type: "ios", + expressions: [ + { + feature: "orientation", + modifier: undefined, + value: "portrait" + } + ] + } + ] + }, + a: 1, + "@media android": { + a: 2 + }, + "@media not ios and (orientation: portrait)": { + a: 4 + } + }; + const result2 = omit(process(styles2, matchObject), "__mediaQueries"); + expect(result2).toEqual({ a: 4 }); + + const styles3 = { + __mediaQueries: { + "@media android": [ + { + inverse: false, + type: "android", + expressions: [] + } + ], + "@media not android and (orientation: portrait)": [ + { + inverse: true, + type: "android", + expressions: [ + { + feature: "orientation", + modifier: undefined, + value: "portrait" + } + ] + } + ] + }, + a: 1, + "@media android": { + a: 2 + }, + "@media not android and (orientation: portrait)": { + a: 3 + } + }; + const result3 = omit(process(styles3, matchObject), "__mediaQueries"); + + expect(result3).toEqual({ a: 3 }); }); it("should process media query with not operator and platform", () => { - expect( - process({ - __mediaQueries: { - "@media android": [ - { - inverse: false, - type: "android", - expressions: [] - } - ], - "@media not android": [ - { - inverse: true, - type: "android", - expressions: [] - } - ] - }, - a: 1, - "@media android": { - a: 2 - }, - "@media not android": { - a: 3 - } - }) - ).toEqual({ a: 3 }); + const styles = { + __mediaQueries: { + "@media android": [ + { + inverse: false, + type: "android", + expressions: [] + } + ], + "@media not android": [ + { + inverse: true, + type: "android", + expressions: [] + } + ] + }, + a: 1, + "@media android": { + a: 2 + }, + "@media not android": { + a: 3 + } + }; + const result = omit(process(styles, matchObject), "__mediaQueries"); + expect(result).toEqual({ a: 3 }); }); it("should ignore non-matching media queries", () => { - expect( - process({ - __mediaQueries: { - "@media print and (min-width: 50px)": [ - { - inverse: false, - type: "print", - expressions: [ - { modifier: "min", feature: "width", value: "50px" } - ] - } - ] - }, - a: 0, - "@media print and (min-width: 50px)": { - a: 1 - } - }) - ).toEqual({ a: 0 }); + const styles = { + __mediaQueries: { + "@media print and (min-width: 50px)": [ + { + inverse: false, + type: "print", + expressions: [{ modifier: "min", feature: "width", value: "50px" }] + } + ] + }, + a: 0, + "@media print and (min-width: 50px)": { + a: 1 + } + }; + const result = omit(process(styles, matchObject), "__mediaQueries"); + expect(result).toEqual({ a: 0 }); }); }); diff --git a/src/index.js b/src/index.js index 36ef94b..b42eb67 100644 --- a/src/index.js +++ b/src/index.js @@ -9,15 +9,6 @@ function isMediaQuery(str) { return typeof str === "string" && str.indexOf(PREFIX) === 0; } -function omit(obj, omitKey) { - return Object.keys(obj).reduce((result, key) => { - if (key !== omitKey) { - result[key] = obj[key]; - } - return result; - }, {}); -} - function filterMq(obj) { return Object.keys(obj).filter(key => isMediaQuery(key)); } @@ -33,18 +24,10 @@ function filterNonMq(obj) { const mFilterMq = memoize(filterMq); const mFilterNonMq = memoize(filterNonMq); -const mOmit = memoize(omit); - -export function process(obj) { - const hasParsedMQs = "__mediaQueries" in obj; - - if (!hasParsedMQs) { - return obj; - } +export function process(obj, matchObject) { const mqKeys = mFilterMq(obj); let res = mFilterNonMq(obj); - const matchObject = getMatchObject(); mqKeys.forEach(key => { if (/^@media\s+(not\s+)?(ios|android)/i.test(key)) { @@ -59,16 +42,5 @@ export function process(obj) { } }); - return mOmit(res, "__mediaQueries"); -} - -function getMatchObject() { - const win = Dimensions.get("window"); - return { - width: win.width, - height: win.height, - orientation: win.width > win.height ? "landscape" : "portrait", - "aspect-ratio": win.width / win.height, - type: "screen" - }; + return res; } From 8869ef5ef90b3b70fcdefad2cafea5bf01e724ba Mon Sep 17 00:00:00 2001 From: krister Date: Tue, 26 Jun 2018 01:26:41 +0300 Subject: [PATCH 2/2] Update benchmarks --- benchmark.js | 142 -------------------------------------- src/perf-tests/current.js | 20 +----- 2 files changed, 2 insertions(+), 160 deletions(-) diff --git a/benchmark.js b/benchmark.js index 7f8c59c..2f2ad3d 100644 --- a/benchmark.js +++ b/benchmark.js @@ -625,9 +625,6 @@ once .add("1 call", function() { process(styles, portrait, Platform); }) - .add("1 call (return early)", function() { - process(stylesWithoutMediaQueries, portrait, Platform); - }) .on("cycle", function(event) { console.log(String(event.target)); }) @@ -641,13 +638,6 @@ onceRequire .add("1 call (require)", function() { require("./dist/perf-tests/current").process(styles, portrait, Platform); }) - .add("1 call (require, return early)", function() { - require("./dist/perf-tests/current").process( - stylesWithoutMediaQueries, - portrait, - Platform - ); - }) .on("cycle", function(event) { console.log(String(event.target)); }) @@ -664,12 +654,6 @@ fourTimes process(styles, portrait, Platform); process(styles, landscape, Platform); }) - .add("4 calls (orientation change, return early)", function() { - process(stylesWithoutMediaQueries, portrait, Platform); - process(stylesWithoutMediaQueries, landscape, Platform); - process(stylesWithoutMediaQueries, portrait, Platform); - process(stylesWithoutMediaQueries, landscape, Platform); - }) .on("cycle", function(event) { console.log(String(event.target)); }) @@ -686,28 +670,6 @@ fourTimesRequire require("./dist/perf-tests/current").process(styles, portrait, Platform); require("./dist/perf-tests/current").process(styles, landscape, Platform); }) - .add("4 calls (orientation change, require, return early)", function() { - require("./dist/perf-tests/current").process( - stylesWithoutMediaQueries, - portrait, - Platform - ); - require("./dist/perf-tests/current").process( - stylesWithoutMediaQueries, - landscape, - Platform - ); - require("./dist/perf-tests/current").process( - stylesWithoutMediaQueries, - portrait, - Platform - ); - require("./dist/perf-tests/current").process( - stylesWithoutMediaQueries, - landscape, - Platform - ); - }) .on("cycle", function(event) { console.log(String(event.target)); }) @@ -728,16 +690,6 @@ eightTimesTheSame process(styles, portrait, Platform); process(styles, portrait, Platform); }) - .add("8 calls (the same parameters, return early)", function() { - process(stylesWithoutMediaQueries, portrait, Platform); - process(stylesWithoutMediaQueries, portrait, Platform); - process(stylesWithoutMediaQueries, portrait, Platform); - process(stylesWithoutMediaQueries, portrait, Platform); - process(stylesWithoutMediaQueries, portrait, Platform); - process(stylesWithoutMediaQueries, portrait, Platform); - process(stylesWithoutMediaQueries, portrait, Platform); - process(stylesWithoutMediaQueries, portrait, Platform); - }) .on("cycle", function(event) { console.log(String(event.target)); }) @@ -758,48 +710,6 @@ eightTimesTheSameRequire require("./dist/perf-tests/current").process(styles, portrait, Platform); require("./dist/perf-tests/current").process(styles, portrait, Platform); }) - .add("8 calls (the same parameters, require, return early)", function() { - require("./dist/perf-tests/current").process( - stylesWithoutMediaQueries, - portrait, - Platform - ); - require("./dist/perf-tests/current").process( - stylesWithoutMediaQueries, - portrait, - Platform - ); - require("./dist/perf-tests/current").process( - stylesWithoutMediaQueries, - portrait, - Platform - ); - require("./dist/perf-tests/current").process( - stylesWithoutMediaQueries, - portrait, - Platform - ); - require("./dist/perf-tests/current").process( - stylesWithoutMediaQueries, - portrait, - Platform - ); - require("./dist/perf-tests/current").process( - stylesWithoutMediaQueries, - portrait, - Platform - ); - require("./dist/perf-tests/current").process( - stylesWithoutMediaQueries, - portrait, - Platform - ); - require("./dist/perf-tests/current").process( - stylesWithoutMediaQueries, - portrait, - Platform - ); - }) .on("cycle", function(event) { console.log(String(event.target)); }) @@ -820,16 +730,6 @@ eightTimes process(styles, portrait, Platform); process(styles, landscape, Platform); }) - .add("8 calls (orientation change, return early)", function() { - process(stylesWithoutMediaQueries, portrait, Platform); - process(stylesWithoutMediaQueries, landscape, Platform); - process(stylesWithoutMediaQueries, portrait, Platform); - process(stylesWithoutMediaQueries, landscape, Platform); - process(stylesWithoutMediaQueries, portrait, Platform); - process(stylesWithoutMediaQueries, landscape, Platform); - process(stylesWithoutMediaQueries, portrait, Platform); - process(stylesWithoutMediaQueries, landscape, Platform); - }) .on("cycle", function(event) { console.log(String(event.target)); }) @@ -850,48 +750,6 @@ eightTimesRequire require("./dist/perf-tests/current").process(styles, portrait, Platform); require("./dist/perf-tests/current").process(styles, landscape, Platform); }) - .add("8 calls (orientation change, require, return early)", function() { - require("./dist/perf-tests/current").process( - stylesWithoutMediaQueries, - portrait, - Platform - ); - require("./dist/perf-tests/current").process( - stylesWithoutMediaQueries, - landscape, - Platform - ); - require("./dist/perf-tests/current").process( - stylesWithoutMediaQueries, - portrait, - Platform - ); - require("./dist/perf-tests/current").process( - stylesWithoutMediaQueries, - landscape, - Platform - ); - require("./dist/perf-tests/current").process( - stylesWithoutMediaQueries, - portrait, - Platform - ); - require("./dist/perf-tests/current").process( - stylesWithoutMediaQueries, - landscape, - Platform - ); - require("./dist/perf-tests/current").process( - stylesWithoutMediaQueries, - portrait, - Platform - ); - require("./dist/perf-tests/current").process( - stylesWithoutMediaQueries, - landscape, - Platform - ); - }) .on("cycle", function(event) { console.log(String(event.target)); }) diff --git a/src/perf-tests/current.js b/src/perf-tests/current.js index c0de4a3..9bb58c7 100644 --- a/src/perf-tests/current.js +++ b/src/perf-tests/current.js @@ -8,15 +8,6 @@ function isMediaQuery(str) { return typeof str === "string" && str.indexOf(PREFIX) === 0; } -function omit(obj, omitKey) { - return Object.keys(obj).reduce((result, key) => { - if (key !== omitKey) { - result[key] = obj[key]; - } - return result; - }, {}); -} - function filterMq(obj) { return Object.keys(obj).filter(key => isMediaQuery(key)); } @@ -32,20 +23,13 @@ function filterNonMq(obj) { const mFilterMq = memoize(filterMq); const mFilterNonMq = memoize(filterNonMq); -const mOmit = memoize(omit); export function process(obj, matchObject, Platform) { - const hasParsedMQs = "__mediaQueries" in obj; - - if (!hasParsedMQs) { - return obj; - } - const mqKeys = mFilterMq(obj); let res = mFilterNonMq(obj); mqKeys.forEach(key => { - if (/^@media\s+(ios|android)/i.test(key)) { + if (/^@media\s+(not\s+)?(ios|android)/i.test(key)) { matchObject.type = Platform.OS; } else { matchObject.type = "screen"; @@ -57,5 +41,5 @@ export function process(obj, matchObject, Platform) { } }); - return mOmit(res, "__mediaQueries"); + return res; }