Merge pull request #14 from cssinjs/feature/optimize-performance

Rewrite filterProps and createStyled, fix tests

Author: lttb

src/createStyled.js

@@ -9,9 +9,18 @@ import type {
   TagNameOrStyledElementType
 } from './types'
 
-const createStyled = (jss: Function) => (
-  baseStyles: BaseStylesType = {}
-): StyledType => {
+const getStyledArgs = (
+  tagNameOrStyledElement: TagNameOrStyledElementType
+): StyledElementAttrsType => {
+  if (typeof tagNameOrStyledElement === 'string') {
+    return {tagName: tagNameOrStyledElement, style: {}}
+  }
+
+  const {tagName, style} = tagNameOrStyledElement
+  return {tagName, style}
+}
+
+const createStyled = (jss: Function) => (baseStyles: BaseStylesType = {}): StyledType => {
   let staticSheet
   let dynamicSheet
 
@@ -34,10 +43,7 @@ const createStyled = (jss: Function) => (
     tagNameOrStyledElement: TagNameOrStyledElementType,
     ownStyle: ComponentStyleType
   ): StyledElementType => {
-    const {tagName, style}: StyledElementAttrsType = typeof tagNameOrStyledElement === 'string'
-      ? {tagName: tagNameOrStyledElement, style: {}}
-      : tagNameOrStyledElement
-
+    const {tagName, style} = getStyledArgs(tagNameOrStyledElement)
     const elementStyle = {...style, ...ownStyle}
 
     return styled({tagName, baseStyles, elementStyle, mountSheets})

src/tests/__snapshots__/index.spec.jsx.snap

@@ -9,7 +9,8 @@ exports[`test renders correctly App with default Styled 1`] = `
     </h1>
   </header>
   <section
-    className="section-11-0-12">
+    className="section-11-0-12"
+    data-name="content">
     <button
       className="button-14-0-13 button-15-0-14">
       primitive test
@@ -37,7 +38,8 @@ exports[`test renders correctly App with default styled 1`] = `
     </h1>
   </header>
   <section
-    className="section-3-0-3">
+    className="section-3-0-3"
+    data-name="content">
     <button
       className="button-6-0-4 button-7-0-5">
       primitive test
@@ -67,7 +69,8 @@ exports[`test renders correctly App with injectStyled 1`] = `
       </h1>
     </header>
     <section
-      className="section-19-0-22">
+      className="section-19-0-22"
+      data-name="content">
       <button
         className="button-22-0-23 button-23-0-24">
         primitive test

src/tests/index.spec.jsx

@@ -1,3 +1,4 @@
+import 'react-dom'
 import renderer from 'react-test-renderer'
 import React from 'react'
 

src/utils/filterProps.js

@@ -1,10 +1,16 @@
-import isNativeProp from 'is-react-prop'
+import isReactProp from 'is-react-prop'
 
-export default (props: Object) => (
-  Object
-    .entries(props)
-    .reduce((acc, [name, value]) => (isNativeProp(name)
-      ? {...acc, [name]: value}
-      : acc
-    ), {})
-)
+export default (props: Object) => {
+  const filtered = {}
+  const propNames = Object.keys(props)
+  let name
+
+  for (let i = 0; i < propNames.length; i++) {
+    name = propNames[i]
+    if (isReactProp(name)) {
+      filtered[name] = props[name]
+    }
+  }
+
+  return filtered
+}