From 87eb30f03339682d47174149f38d616228226826 Mon Sep 17 00:00:00 2001 From: mitchellhamilton Date: Mon, 25 Sep 2017 15:15:45 +1000 Subject: [PATCH 1/7] Check perf --- packages/emotion/src/index.js | 34 ++++++++++++++++------------------ 1 file changed, 16 insertions(+), 18 deletions(-) diff --git a/packages/emotion/src/index.js b/packages/emotion/src/index.js index b9d590bb4..22550af17 100644 --- a/packages/emotion/src/index.js +++ b/packages/emotion/src/index.js @@ -145,24 +145,6 @@ const processStyleValue = (key, value) => { return value } -function createCache(fn) { - const cache = new WeakMap() - - return arg => { - if (cache.has(arg)) { - return cache.get(arg) - } - const result = fn(arg) - cache.set(arg, result) - return result - } -} - -const createStringFromObject = - typeof WeakMap === 'undefined' - ? _createStringFromObject - : createCache(_createStringFromObject) - function _createStringFromObject(obj) { let string = '' @@ -189,6 +171,22 @@ function _createStringFromObject(obj) { return string } +const objectToStringCache = new WeakMap() + +function _createStringFromObjectCached(arg) { + if (objectToStringCache.has(arg)) { + return objectToStringCache.get(arg) + } + const result = _createStringFromObject(arg) + objectToStringCache.set(arg, result) + return result +} + +const createStringFromObject = + typeof WeakMap === 'undefined' + ? _createStringFromObject + : _createStringFromObjectCached + function isLastCharDot(string) { return string.charCodeAt(string.length - 1) === 46 // . } From e32b8e4aa5497015d4d435b57bac283d991a9c0e Mon Sep 17 00:00:00 2001 From: mitchellhamilton Date: Mon, 25 Sep 2017 15:20:25 +1000 Subject: [PATCH 2/7] Test --- packages/emotion/src/index.js | 25 ++++++++----------------- 1 file changed, 8 insertions(+), 17 deletions(-) diff --git a/packages/emotion/src/index.js b/packages/emotion/src/index.js index 22550af17..0e0a6d874 100644 --- a/packages/emotion/src/index.js +++ b/packages/emotion/src/index.js @@ -145,7 +145,12 @@ const processStyleValue = (key, value) => { return value } -function _createStringFromObject(obj) { +const objectToStringCache = new WeakMap() + +function createStringFromObject(obj) { + if (objectToStringCache.has(obj)) { + return objectToStringCache.get(obj) + } let string = '' if (Array.isArray(obj)) { @@ -168,25 +173,11 @@ function _createStringFromObject(obj) { } }) } - return string -} + objectToStringCache.set(obj, string) -const objectToStringCache = new WeakMap() - -function _createStringFromObjectCached(arg) { - if (objectToStringCache.has(arg)) { - return objectToStringCache.get(arg) - } - const result = _createStringFromObject(arg) - objectToStringCache.set(arg, result) - return result + return string } -const createStringFromObject = - typeof WeakMap === 'undefined' - ? _createStringFromObject - : _createStringFromObjectCached - function isLastCharDot(string) { return string.charCodeAt(string.length - 1) === 46 // . } From 58718ecebf6d7eed9c5b955f9a84bd2a71bdc3ae Mon Sep 17 00:00:00 2001 From: mitchellhamilton Date: Mon, 25 Sep 2017 15:27:34 +1000 Subject: [PATCH 3/7] Inline processStyleValue --- packages/emotion/src/index.js | 27 +++++++++++++-------------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/packages/emotion/src/index.js b/packages/emotion/src/index.js index 0e0a6d874..734956495 100644 --- a/packages/emotion/src/index.js +++ b/packages/emotion/src/index.js @@ -135,16 +135,6 @@ const processStyleName = memoize(styleName => styleName.replace(hyphenateRegex, '-$&').toLowerCase() ) -const processStyleValue = (key, value) => { - if (value === undefined || value === null || typeof value === 'boolean') - return '' - - if (unitless[key] !== 1 && !isNaN(value) && value !== 0) { - return value + 'px' - } - return value -} - const objectToStringCache = new WeakMap() function createStringFromObject(obj) { @@ -163,10 +153,19 @@ function createStringFromObject(obj) { if (registered[obj[key]] !== undefined) { string += `${key}{${registered[obj[key]]}}` } else { - string += `${processStyleName(key)}:${processStyleValue( - key, - obj[key] - )};` + let styleValue = obj[key] + if ( + styleValue === undefined || + styleValue === null || + typeof fakeValue === 'boolean' + ) { + styleValue = '' + } + + if (unitless[key] !== 1 && !isNaN(styleValue) && styleValue !== 0) { + styleValue += 'px' + } + string += `${processStyleName(key)}:${styleValue}};` } } else { string += `${key}{${createStringFromObject(obj[key])}}` From 4394b9e433a3c71cbc6dfc1cbc3f96bb844f51d4 Mon Sep 17 00:00:00 2001 From: mitchellhamilton Date: Mon, 25 Sep 2017 15:34:11 +1000 Subject: [PATCH 4/7] Fix --- packages/emotion/src/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/emotion/src/index.js b/packages/emotion/src/index.js index 734956495..1ea9837e4 100644 --- a/packages/emotion/src/index.js +++ b/packages/emotion/src/index.js @@ -157,7 +157,7 @@ function createStringFromObject(obj) { if ( styleValue === undefined || styleValue === null || - typeof fakeValue === 'boolean' + typeof styleValue === 'boolean' ) { styleValue = '' } @@ -165,7 +165,7 @@ function createStringFromObject(obj) { if (unitless[key] !== 1 && !isNaN(styleValue) && styleValue !== 0) { styleValue += 'px' } - string += `${processStyleName(key)}:${styleValue}};` + string += `${processStyleName(key)}:${styleValue};` } } else { string += `${key}{${createStringFromObject(obj[key])}}` From 7a36e30a2d427bfff4f0eecfdf14f10a899291af Mon Sep 17 00:00:00 2001 From: mitchellhamilton Date: Mon, 25 Sep 2017 15:34:41 +1000 Subject: [PATCH 5/7] Actually fix --- packages/emotion/src/index.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/emotion/src/index.js b/packages/emotion/src/index.js index 1ea9837e4..7982d900d 100644 --- a/packages/emotion/src/index.js +++ b/packages/emotion/src/index.js @@ -162,7 +162,12 @@ function createStringFromObject(obj) { styleValue = '' } - if (unitless[key] !== 1 && !isNaN(styleValue) && styleValue !== 0) { + if ( + unitless[key] !== 1 && + !isNaN(styleValue) && + styleValue !== 0 && + styleValue !== '' + ) { styleValue += 'px' } string += `${processStyleName(key)}:${styleValue};` From 198f5dcfb72f0ca10b6744cf481ab517ccc2132f Mon Sep 17 00:00:00 2001 From: mitchellhamilton Date: Mon, 25 Sep 2017 15:35:14 +1000 Subject: [PATCH 6/7] Better fix --- packages/emotion/src/index.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/emotion/src/index.js b/packages/emotion/src/index.js index 7982d900d..08e9e31d6 100644 --- a/packages/emotion/src/index.js +++ b/packages/emotion/src/index.js @@ -160,13 +160,10 @@ function createStringFromObject(obj) { typeof styleValue === 'boolean' ) { styleValue = '' - } - - if ( + } else if ( unitless[key] !== 1 && !isNaN(styleValue) && - styleValue !== 0 && - styleValue !== '' + styleValue !== 0 ) { styleValue += 'px' } From b5ced25fcaeb3b1f72045bab61758ae36dc31cb6 Mon Sep 17 00:00:00 2001 From: mitchellhamilton Date: Mon, 25 Sep 2017 15:40:41 +1000 Subject: [PATCH 7/7] Don't inline processStyleValue --- packages/emotion/src/index.js | 29 ++++++++++++++--------------- 1 file changed, 14 insertions(+), 15 deletions(-) diff --git a/packages/emotion/src/index.js b/packages/emotion/src/index.js index 08e9e31d6..0e0a6d874 100644 --- a/packages/emotion/src/index.js +++ b/packages/emotion/src/index.js @@ -135,6 +135,16 @@ const processStyleName = memoize(styleName => styleName.replace(hyphenateRegex, '-$&').toLowerCase() ) +const processStyleValue = (key, value) => { + if (value === undefined || value === null || typeof value === 'boolean') + return '' + + if (unitless[key] !== 1 && !isNaN(value) && value !== 0) { + return value + 'px' + } + return value +} + const objectToStringCache = new WeakMap() function createStringFromObject(obj) { @@ -153,21 +163,10 @@ function createStringFromObject(obj) { if (registered[obj[key]] !== undefined) { string += `${key}{${registered[obj[key]]}}` } else { - let styleValue = obj[key] - if ( - styleValue === undefined || - styleValue === null || - typeof styleValue === 'boolean' - ) { - styleValue = '' - } else if ( - unitless[key] !== 1 && - !isNaN(styleValue) && - styleValue !== 0 - ) { - styleValue += 'px' - } - string += `${processStyleName(key)}:${styleValue};` + string += `${processStyleName(key)}:${processStyleValue( + key, + obj[key] + )};` } } else { string += `${key}{${createStringFromObject(obj[key])}}`