From cff7fbe0a04d700c52981722e53e7bf8f24c2d0a Mon Sep 17 00:00:00 2001 From: artalar Date: Mon, 5 Sep 2022 22:11:30 +0000 Subject: [PATCH 1/8] use destructuring intead of assigment --- src/styled.js | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/styled.js b/src/styled.js index 65bd6682..f55cf96f 100644 --- a/src/styled.js +++ b/src/styled.js @@ -2,14 +2,15 @@ import { css } from './css'; import { parse } from './core/parse'; let h, useTheme, fwdProp; -function setup(pragma, prefix, theme, forwardProps) { - // This one needs to stay in here, so we won't have cyclic dependencies - parse.p = prefix; - - // These are scope to this context - h = pragma; - useTheme = theme; - fwdProp = forwardProps; +function setup() { + [ + // These are scope to this context + h, + // This one needs to stay in here, so we won't have cyclic dependencies + parse.p, + useTheme, + fwdProp + ] = arguments; } /** From f889cf70bf79c7fd98a5be0c42bbf93969eb744d Mon Sep 17 00:00:00 2001 From: artalar Date: Mon, 5 Sep 2022 22:12:17 +0000 Subject: [PATCH 2/8] reuse "let" keyword --- src/styled.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/styled.js b/src/styled.js index f55cf96f..5e317b5b 100644 --- a/src/styled.js +++ b/src/styled.js @@ -27,6 +27,8 @@ function styled(tag, forwardRef) { function Styled(props, ref) { // Grab a shallow copy of the props let _props = Object.assign({}, props); + // Assign the _as with the provided `tag` value + let _as = tag; // Keep a local reference to the previous className let _previousClassName = _props.className || Styled.className; @@ -48,9 +50,6 @@ function styled(tag, forwardRef) { _props.ref = ref; } - // Assign the _as with the provided `tag` value - let _as = tag; - // If this is a string -- checking that is has a first valid char if (tag[0]) { // Try to assign the _as with the given _as value if any From 4f06f55297e33cd91da598905d39acaa626a86fa Mon Sep 17 00:00:00 2001 From: artalar Date: Mon, 5 Sep 2022 22:14:27 +0000 Subject: [PATCH 3/8] reduce "else" and extra "return" by var reusing --- src/core/hash.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/core/hash.js b/src/core/hash.js index c660440a..ea12b0a0 100644 --- a/src/core/hash.js +++ b/src/core/hash.js @@ -17,10 +17,9 @@ let stringify = (data) => { if (typeof data == 'object') { let out = ''; for (let p in data) out += p + stringify(data[p]); - return out; - } else { - return data; + data = out; } + return data; }; /** From 861f36cb4f157e40d7dc3ea96c4ecf02a35ac3ad Mon Sep 17 00:00:00 2001 From: artalar Date: Mon, 5 Sep 2022 22:19:47 +0000 Subject: [PATCH 4/8] use extra arguments intead of "let" declarations --- src/core/astish.js | 5 +---- src/core/hash.js | 3 +-- src/core/parse.js | 6 +----- src/core/to-hash.js | 4 +--- src/core/update.js | 9 +++------ src/css.js | 5 +---- 6 files changed, 8 insertions(+), 24 deletions(-) diff --git a/src/core/astish.js b/src/core/astish.js index 6a7eb1df..c1b15edd 100644 --- a/src/core/astish.js +++ b/src/core/astish.js @@ -8,10 +8,7 @@ let empty = ' '; * @param {String} val * @returns {Object} */ -export let astish = (val) => { - let tree = [{}]; - let block, left; - +export let astish = (val, tree = [{}], block, left) => { while ((block = newRule.exec(val.replace(ruleClean, '')))) { // Remove the current entry if (block[4]) { diff --git a/src/core/hash.js b/src/core/hash.js index ea12b0a0..497f7c8a 100644 --- a/src/core/hash.js +++ b/src/core/hash.js @@ -13,9 +13,8 @@ let cache = {}; * @param {Object} data * @returns {String} */ -let stringify = (data) => { +let stringify = (data, out = '') => { if (typeof data == 'object') { - let out = ''; for (let p in data) out += p + stringify(data[p]); data = out; } diff --git a/src/core/parse.js b/src/core/parse.js index fb05f852..97206710 100644 --- a/src/core/parse.js +++ b/src/core/parse.js @@ -4,11 +4,7 @@ * @param {String} selector * @param {String} wrapper */ -export let parse = (obj, selector) => { - let outer = ''; - let blocks = ''; - let current = ''; - +export let parse = (obj, selector, outer = '', blocks = '', current = '') => { for (let key in obj) { let val = obj[key]; diff --git a/src/core/to-hash.js b/src/core/to-hash.js index 569b9bf0..522e6821 100644 --- a/src/core/to-hash.js +++ b/src/core/to-hash.js @@ -7,9 +7,7 @@ * @param {String} str * @returns {String} */ -export let toHash = (str) => { - let i = 0, - out = 11; +export let toHash = (str, i = 0, out = 11) => { while (i < str.length) out = (101 * out + str.charCodeAt(i++)) >>> 0; return 'go' + out; }; diff --git a/src/core/update.js b/src/core/update.js index 3bdf55e0..3f4c1a17 100644 --- a/src/core/update.js +++ b/src/core/update.js @@ -3,12 +3,9 @@ import { getSheet } from './get-sheet'; * Extracts and wipes the cache * @returns {String} */ -export let extractCss = (target) => { - let sheet = getSheet(target); - let out = sheet.data; - sheet.data = ''; - return out; -}; +export let extractCss = (target, sheet = getSheet(target), out = sheet.data) => ( + (sheet.data = ''), out +); /** * Updates the target and keeps a local cache diff --git a/src/css.js b/src/css.js index 6d1d1610..da286d47 100644 --- a/src/css.js +++ b/src/css.js @@ -6,10 +6,7 @@ import { getSheet } from './core/get-sheet'; * css entry * @param {String|Object|Function} val */ -function css(val) { - let ctx = this || {}; - let _val = val.call ? val(ctx.p) : val; - +function css(val, ctx = this || {}, _val = val.call ? val(ctx.p) : val) { return hash( _val.unshift ? _val.raw From aeff21804f2ab29e24d847c2f956d1a02c81f6b2 Mon Sep 17 00:00:00 2001 From: artalar Date: Mon, 5 Sep 2022 22:34:28 +0000 Subject: [PATCH 5/8] use spread arguments --- src/css.js | 6 ++++-- src/styled.js | 27 +++++++++++++-------------- 2 files changed, 17 insertions(+), 16 deletions(-) diff --git a/src/css.js b/src/css.js index da286d47..2cfa1bf4 100644 --- a/src/css.js +++ b/src/css.js @@ -6,12 +6,14 @@ import { getSheet } from './core/get-sheet'; * css entry * @param {String|Object|Function} val */ -function css(val, ctx = this || {}, _val = val.call ? val(ctx.p) : val) { +function css(val, ..._args) { + let ctx = this || {}; + let _val = val.call ? val(ctx.p) : val; return hash( _val.unshift ? _val.raw ? // Tagged templates - compile(_val, [].slice.call(arguments, 1), ctx.p) + compile(_val, _args, ctx.p) : // Regular arrays _val.reduce((o, i) => Object.assign(o, i && i.call ? i(ctx.p) : i), {}) : _val, diff --git a/src/styled.js b/src/styled.js index 5e317b5b..d8c8c3ee 100644 --- a/src/styled.js +++ b/src/styled.js @@ -1,17 +1,18 @@ import { css } from './css'; import { parse } from './core/parse'; -let h, useTheme, fwdProp; -function setup() { - [ - // These are scope to this context - h, - // This one needs to stay in here, so we won't have cyclic dependencies - parse.p, - useTheme, - fwdProp - ] = arguments; -} +let h, + useTheme, + fwdProp, + setup = (..._args) => + ([ + // These are scope to this context + h, + // This one needs to stay in here, so we won't have cyclic dependencies + parse.p, + useTheme, + fwdProp + ] = _args); /** * styled function @@ -21,9 +22,7 @@ function setup() { function styled(tag, forwardRef) { let _ctx = this || {}; - return function wrapper() { - let _args = arguments; - + return function wrapper(..._args) { function Styled(props, ref) { // Grab a shallow copy of the props let _props = Object.assign({}, props); From f4ce1dcc5b622d7f1b9929c0d2d44f1a3fa6ef76 Mon Sep 17 00:00:00 2001 From: artalar Date: Mon, 5 Sep 2022 22:48:49 +0000 Subject: [PATCH 6/8] reuse variable --- src/styled.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/styled.js b/src/styled.js index d8c8c3ee..0a380af4 100644 --- a/src/styled.js +++ b/src/styled.js @@ -25,44 +25,44 @@ function styled(tag, forwardRef) { return function wrapper(..._args) { function Styled(props, ref) { // Grab a shallow copy of the props - let _props = Object.assign({}, props); + props = Object.assign({}, props); // Assign the _as with the provided `tag` value let _as = tag; // Keep a local reference to the previous className - let _previousClassName = _props.className || Styled.className; + let _previousClassName = props.className || Styled.className; // _ctx.p: is the props sent to the context - _ctx.p = Object.assign({ theme: useTheme && useTheme() }, _props); + _ctx.p = Object.assign({ theme: useTheme && useTheme() }, props); // Set a flag if the current components had a previous className // similar to goober. This is the append/prepend flag // The _empty_ space compresses better than `\s` _ctx.o = / *go\d+/.test(_previousClassName); - _props.className = + props.className = // Define the new className css.apply(_ctx, _args) + (_previousClassName ? ' ' + _previousClassName : ''); // If the forwardRef fun is defined we have the ref if (forwardRef) { - _props.ref = ref; + props.ref = ref; } // If this is a string -- checking that is has a first valid char if (tag[0]) { // Try to assign the _as with the given _as value if any - _as = _props.as || tag; + _as = props.as || tag; // And remove it - delete _props.as; + delete props.as; } // Handle the forward props filter if defined and _as is a string if (fwdProp && _as[0]) { - fwdProp(_props); + fwdProp(props); } - return h(_as, _props); + return h(_as, props); } return forwardRef ? forwardRef(Styled) : Styled; From 9dcbd7e746b3dcbbd65f1f0f1ec074fe023f77fa Mon Sep 17 00:00:00 2001 From: artalar Date: Mon, 5 Sep 2022 23:20:01 +0000 Subject: [PATCH 7/8] use extra arguments intead of "let" declarations --- src/__tests__/styled.test.js | 6 +++--- src/styled.js | 14 ++++++++------ 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/src/__tests__/styled.test.js b/src/__tests__/styled.test.js index 19bdea46..db320b54 100644 --- a/src/__tests__/styled.test.js +++ b/src/__tests__/styled.test.js @@ -28,7 +28,7 @@ describe('styled', () => { expect(() => styled()()()).toThrow(); setup(pragma); - const vnode = styled('div')``(); + const vnode = styled('div')``({}); expect(pragma).toBeCalledTimes(1); expect(vnode).toMatchVNode('div', { @@ -75,7 +75,7 @@ describe('styled', () => { `; // Simulate a render - let vnode = Tag(); + let vnode = Tag({}); expect(vnode).toMatchVNode('tag', { className: 'go' }); // Simulate a render with @@ -84,7 +84,7 @@ describe('styled', () => { expect(vnode).toMatchVNode('foo', { className: 'go' }); // Simulate a render - vnode = Tag(); + vnode = Tag({}); expect(vnode).toMatchVNode('tag', { className: 'go' }); }); diff --git a/src/styled.js b/src/styled.js index 0a380af4..19cca5ea 100644 --- a/src/styled.js +++ b/src/styled.js @@ -23,14 +23,16 @@ function styled(tag, forwardRef) { let _ctx = this || {}; return function wrapper(..._args) { - function Styled(props, ref) { - // Grab a shallow copy of the props - props = Object.assign({}, props); + function Styled( + props, + ref, // Assign the _as with the provided `tag` value - let _as = tag; - + _as = tag, // Keep a local reference to the previous className - let _previousClassName = props.className || Styled.className; + _previousClassName = props.className || Styled.className + ) { + // Grab a shallow copy of the props + props = Object.assign({}, props); // _ctx.p: is the props sent to the context _ctx.p = Object.assign({ theme: useTheme && useTheme() }, props); From 7b1a19aa4c2cceee2a6acb14d49667dce940ba1a Mon Sep 17 00:00:00 2001 From: artalar Date: Mon, 5 Sep 2022 23:56:27 +0000 Subject: [PATCH 8/8] move computation from variable to it using --- src/core/hash.js | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/src/core/hash.js b/src/core/hash.js index 497f7c8a..681267bc 100644 --- a/src/core/hash.js +++ b/src/core/hash.js @@ -51,14 +51,18 @@ export let hash = (compiled, sheet, global, append, keyframes) => { ); } - // If the global flag is set, save the current stringified and compiled CSS to `cache.g` - // to allow replacing styles in