Merge pull request styled-components#814 from styled-components/with-…

…component-replacing-extend-with

Changed extendWith to withComponent

CHANGELOG.md

@@ -14,6 +14,7 @@ All notable changes to this project will be documented in this file. If a contri
 - Added `attrs` constructor for passing extra attributes to the underlying element
 - Added warnings for components generating a lot of classes, thanks to [@vdanchenkov](https://github.com/vdanchenkov). (see [#268](https://github.com/styled-components/styled-components/pull/268))
 - Standardised `styled(Comp)` to work the same in all cases, rather than a special extension case where `Comp` is another Styled Component. `Comp.extend` now covers that case. (see [#518](https://github.com/styled-components/styled-components/pull/518)).
+- Added `Comp.withComponent(Other)` to allow cloning of an existing SC with a new tag. (see [#814](https://github.com/styled-components/styled-components/pull/814).
 - Added a separate `no-parser` entrypoint for preprocessed CSS, which doesn't depend on stylis. The preprocessing is part of our babel plugin. (see [babel-plugin-styled-components/#26](https://github.com/styled-components/babel-plugin-styled-components/pull/26))
 - Fix defaultProps used instead of ThemeProvider on first render [@k15a](https://github.com/k15a), restored.
 - Refactor StyledComponent for performance optimization.

package.json

@@ -16,9 +16,11 @@
     "build:watch": "npm run build:lib -- --watch",
     "test": "npm run test:web && npm run test:native",
     "test:web": "jest",
+    "test:web:watch": "npm run test:web -- --watch",
     "test:native": "jest -c .jest.native.json",
-    "test:watch": "npm run test -- --watch",
+    "test:native:watch": "npm run test:native -- --watch",
     "flow": "flow check",
+    "flow:watch": "flow-watch",
     "lint": "eslint src",
     "tslint": "tslint typings/*.ts native/*.ts",
     "typescript": "tsc ./typings/styled-components-test.tsx ./typings/styled-components-native-test.tsx ./typings/themed-tests/mytheme-styled-components-test.tsx --noEmit --jsx react --target es6 --module es2015 --moduleResolution node",
@@ -96,6 +98,7 @@
     "express": "^4.14.1",
     "flow-bin": "^0.43.1",
     "flow-copy-source": "^1.1.0",
+    "flow-watch": "^1.1.1",
     "jest": "^19.0.2",
     "jsdom": "^9.10.0",
     "lint-staged": "^3.3.0",

src/constructors/constructWithOptions.js

@@ -8,7 +8,7 @@ export default (css: Function) => {
     /* This is callable directly as a template function */
     const templateFunction =
       (strings: Array<string>, ...interpolations: Array<Interpolation>) =>
-        componentConstructor(tag, options, css(strings, ...interpolations), templateFunction)
+        componentConstructor(tag, options, css(strings, ...interpolations))
 
     /* If config methods are called, wrap up a new template function and merge options */
     templateFunction.withConfig = config =>

src/models/StyledComponent.js

@@ -204,14 +204,16 @@ export default (ComponentStyle: Function, constructWithOptions: Function) => {
       static warnTooManyClasses = warnTooManyClasses
       static target = target
 
-      static extendWith(tag) {
+      static withComponent(tag) {
         const { displayName: _, componentId: __, ...optionsToCopy } = options
-        const newOptions = { ...optionsToCopy, rules, ParentComponent: StyledComponent }
-        return constructWithOptions(createStyledComponent, tag, newOptions)
+        const newOptions = { ...optionsToCopy, ParentComponent: StyledComponent }
+        return createStyledComponent(tag, newOptions, rules)
       }
 
       static get extend() {
-        return StyledComponent.extendWith(target)
+        const { displayName: _, componentId: __, ...optionsToCopy } = options
+        const newOptions = { ...optionsToCopy, rules, ParentComponent: StyledComponent }
+        return constructWithOptions(createStyledComponent, target, newOptions)
       }
     }
 

src/models/StyledNativeComponent.js

@@ -156,14 +156,16 @@ export default (constructWithOptions: Function) => {
       // NOTE: This is so that isStyledComponent passes for the innerRef unwrapping
       static styledComponentId = 'StyledNativeComponent'
 
-      static extendWith(tag) {
+      static withComponent(tag) {
         const { displayName: _, componentId: __, ...optionsToCopy } = options
-        const newOptions = { ...optionsToCopy, rules, ParentComponent: StyledNativeComponent }
-        return constructWithOptions(createStyledNativeComponent, tag, newOptions)
+        const newOptions = { ...optionsToCopy, ParentComponent: StyledNativeComponent }
+        return createStyledNativeComponent(tag, newOptions, rules)
       }
 
       static get extend() {
-        return StyledNativeComponent.extendWith(target)
+        const { displayName: _, componentId: __, ...optionsToCopy } = options
+        const newOptions = { ...optionsToCopy, rules, ParentComponent: StyledNativeComponent }
+        return constructWithOptions(createStyledNativeComponent, target, newOptions)
       }
     }
 

src/test/extending.test.js

@@ -141,8 +141,22 @@ describe('extending', () => {
 
   it('should allow changing component', () => {
     const Parent = styled.div`color: red;`
-    const Child = Parent.extendWith('span')``
+    const Child = Parent.withComponent('span')
 
     expect(shallow(<Child />).html()).toEqual('<span class="sc-b c"></span>')
   })
+
+  it('should allow changing component and extending', () => {
+    const Parent = styled.div`
+      color: red;
+    `
+    const Child = Parent.withComponent('span').extend`
+      color: green;
+    `
+
+    expect(shallow(<Child />).html()).toEqual('<span class="sc-c d"></span>')
+    expectCSSMatches(`
+      .sc-c {} .d { color: red; color: green; }
+    `)
+  })
 })