fix: passing rootEl in extended custom component (#374)

* fix: Keep rootEl in extended custom component

Closes #364

* docs: Add exah to contributors

.all-contributorsrc

@@ -536,6 +536,17 @@
       "contributions": [
         "ideas"
       ]
+    },
+    {
+      "login": "exah",
+      "name": "John Grishin",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/442932?v=4",
+      "profile": "http://johngrish.in",
+      "contributions": [
+        "bug",
+        "code",
+        "test"
+      ]
     }
   ]
 }

README.md

@@ -14,7 +14,7 @@
 [![downloads][downloads-badge]][npmcharts]
 [![MIT License][license-badge]][license]
 
-[![All Contributors](https://img.shields.io/badge/all_contributors-56-orange.svg?style=flat-square)](#contributors)
+[![All Contributors](https://img.shields.io/badge/all_contributors-57-orange.svg?style=flat-square)](#contributors)
 [![PRs Welcome][prs-badge]][prs]
 [![Chat][chat-badge]][chat]
 [![Code of Conduct][coc-badge]][coc]
@@ -162,6 +162,7 @@ Thanks goes to these people ([emoji key][emojis]):
 | [<img src="https://avatars3.githubusercontent.com/u/22868432?v=3" width="100px;"/><br /><sub><b>Lufty Wiranda</b></sub>](http://instagram.com/luftywiranda13)<br />[💻](https://github.com/paypal/glamorous/commits?author=luftywiranda13 "Code") | [<img src="https://avatars3.githubusercontent.com/u/3208863?v=3" width="100px;"/><br /><sub><b>Ansuman Shah</b></sub>](https://github.com/ansumanshah)<br />[💻](https://github.com/paypal/glamorous/commits?author=ansumanshah "Code") [📖](https://github.com/paypal/glamorous/commits?author=ansumanshah "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/11598?v=3" width="100px;"/><br /><sub><b>Travis LaDuke</b></sub>](http://-)<br />[💡](#example-laduke "Examples") | [<img src="https://avatars2.githubusercontent.com/u/11290953?v=3" width="100px;"/><br /><sub><b>Aydın Çağrı Dumlu</b></sub>](https://github.com/acgrdumlu)<br />[🐛](https://github.com/paypal/glamorous/issues?q=author%3Aacgrdumlu "Bug reports") [💻](https://github.com/paypal/glamorous/commits?author=acgrdumlu "Code") | [<img src="https://avatars2.githubusercontent.com/u/1383861?v=3" width="100px;"/><br /><sub><b>Maja Wichrowska</b></sub>](https://github.com/majapw)<br />[🐛](https://github.com/paypal/glamorous/issues?q=author%3Amajapw "Bug reports") | [<img src="https://avatars3.githubusercontent.com/u/6845263?v=3" width="100px;"/><br /><sub><b>Tom Liu</b></sub>](https://github.com/gt3240)<br />[📖](https://github.com/paypal/glamorous/commits?author=gt3240 "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/1863771?v=3" width="100px;"/><br /><sub><b>Siddharth Kshetrapal</b></sub>](https://github.com/siddharthkp)<br />[⚠️](https://github.com/paypal/glamorous/commits?author=siddharthkp "Tests") [🔧](#tool-siddharthkp "Tools") |
 | [<img src="https://avatars2.githubusercontent.com/u/5257243?v=3" width="100px;"/><br /><sub><b>WillowHQ</b></sub>](https://github.com/WillowHQ)<br />[📖](https://github.com/paypal/glamorous/commits?author=WillowHQ "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/12202757?v=4" width="100px;"/><br /><sub><b>Mohammad Rajabifard</b></sub>](https://tarino.ir)<br />[🐛](https://github.com/paypal/glamorous/issues?q=author%3Amorajabi "Bug reports") [📖](https://github.com/paypal/glamorous/commits?author=morajabi "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/17005317?v=3" width="100px;"/><br /><sub><b>Omar Albacha</b></sub>](https://github.com/Oalbacha)<br />[💻](https://github.com/paypal/glamorous/commits?author=Oalbacha "Code") [📖](https://github.com/paypal/glamorous/commits?author=Oalbacha "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/28659384?v=3" width="100px;"/><br /><sub><b>tdeschryver</b></sub>](https://github.com/tdeschryver)<br />[💻](https://github.com/paypal/glamorous/commits?author=tdeschryver "Code") [⚠️](https://github.com/paypal/glamorous/commits?author=tdeschryver "Tests") | [<img src="https://avatars0.githubusercontent.com/u/4955191?v=4" width="100px;"/><br /><sub><b>Dylan Mozlowski</b></sub>](https://github.com/DylanMoz)<br />[💻](https://github.com/paypal/glamorous/commits?author=DylanMoz "Code") | [<img src="https://avatars2.githubusercontent.com/u/3275424?v=4" width="100px;"/><br /><sub><b>andretshurotshka</b></sub>](https://github.com/goodmind)<br />[💻](https://github.com/paypal/glamorous/commits?author=goodmind "Code") [⚠️](https://github.com/paypal/glamorous/commits?author=goodmind "Tests") | [<img src="https://avatars3.githubusercontent.com/u/12836237?v=4" width="100px;"/><br /><sub><b>Danila</b></sub>](https://github.com/O4epegb)<br />[⚠️](https://github.com/paypal/glamorous/commits?author=O4epegb "Tests") |
 | [<img src="https://avatars3.githubusercontent.com/u/12473268?v=4" width="100px;"/><br /><sub><b>Junyoung Clare Jang</b></sub>](http://ailrun.github.io/)<br />[💻](https://github.com/paypal/glamorous/commits?author=Ailrun "Code") [⚠️](https://github.com/paypal/glamorous/commits?author=Ailrun "Tests") | [<img src="https://avatars2.githubusercontent.com/u/897575?v=4" width="100px;"/><br /><sub><b>Björn Ricks</b></sub>](https://twitter.com/bjoernricks)<br />[🐛](https://github.com/paypal/glamorous/issues?q=author%3Abjoernricks "Bug reports") [💻](https://github.com/paypal/glamorous/commits?author=bjoernricks "Code") [📖](https://github.com/paypal/glamorous/commits?author=bjoernricks "Documentation") [⚠️](https://github.com/paypal/glamorous/commits?author=bjoernricks "Tests") | [<img src="https://avatars0.githubusercontent.com/u/4934193?v=4" width="100px;"/><br /><sub><b>Tyler Deitz</b></sub>](http://tylerdeitz.com)<br />[💻](https://github.com/paypal/glamorous/commits?author=tvler "Code") | [<img src="https://avatars2.githubusercontent.com/u/16104985?v=4" width="100px;"/><br /><sub><b>Shovan Chatterjee</b></sub>](https://twitter.com/shovan_ch)<br />[📖](https://github.com/paypal/glamorous/commits?author=shovanch "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/6839660?v=4" width="100px;"/><br /><sub><b>johnjessewood</b></sub>](https://github.com/johnjesse)<br />[💻](https://github.com/paypal/glamorous/commits?author=johnjesse "Code") | [<img src="https://avatars3.githubusercontent.com/u/856386?v=4" width="100px;"/><br /><sub><b>Daniel</b></sub>](https://www.danielberndt.net)<br />[💻](https://github.com/paypal/glamorous/commits?author=danielberndt "Code") [⚠️](https://github.com/paypal/glamorous/commits?author=danielberndt "Tests") | [<img src="https://avatars0.githubusercontent.com/u/174864?v=4" width="100px;"/><br /><sub><b>Ken Powers</b></sub>](https://knpw.rs)<br />[🤔](#ideas-knpwrs "Ideas, Planning, & Feedback") |
+| [<img src="https://avatars1.githubusercontent.com/u/442932?v=4" width="100px;"/><br /><sub><b>John Grishin</b></sub>](http://johngrish.in)<br />[🐛](https://github.com/paypal/glamorous/issues?q=author%3Aexah "Bug reports") [💻](https://github.com/paypal/glamorous/commits?author=exah "Code") [⚠️](https://github.com/paypal/glamorous/commits?author=exah "Tests") |
 
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 

src/__tests__/index.with-props.js

@@ -117,3 +117,11 @@ test('allows you to provide any number of arguments for props', () => {
     expectContext,
   )
 })
+
+test('custom component with props to filter custom props', () => {
+  const MyComp = glamorous(props => <div {...props} />, {rootEl: 'div'})({})
+  const MyCompWithProps = MyComp.withProps({propA: true})
+  const rendered = render(<MyCompWithProps propB={true} />).find('div')
+  expect(rendered.prop('propA')).toBeUndefined()
+  expect(rendered.prop('propB')).toBeUndefined()
+})

src/create-glamorous.js

@@ -196,7 +196,7 @@ function createGlamorous(splitProps) {
       // the base component, even when people wrap a glamorous
       // component in glamorous
       comp: componentsComp,
-      rootEl: rootEl || componentsComp,
+      rootEl: rootEl || getRootEl(comp),
       // join forwardProps and filterProps
       // (for anyone doing: glamorous(glamorous.a({}), {}))
       forwardProps: when(comp.forwardProps, forwardProps),
@@ -250,6 +250,10 @@ function when(comp, prop) {
   return comp ? comp.concat(prop) : prop
 }
 
+function getRootEl(comp) {
+  return comp.rootEl ? comp.rootEl : comp.comp || comp
+}
+
 function getDisplayName(comp) {
   return typeof comp === 'string'
     ? comp