Upgrade to TypeScript 4.2 and update transformer

CHANGELOG.md

@@ -3,6 +3,8 @@ All notable changes to this project will be documented in this file.
 
 ## [Unreleased]
 
+- **breaking change** upgrade to TypeScript 4+ and make use of Factory API (#379)
+
 ## [1.6.0]
 
 - namespace prefix to help multiple instances of the library not clash (fix #381 in #395)

package.json

@@ -21,7 +21,7 @@
     },
     "typings": "dist/index.d.ts",
     "peerDependencies": {
-        "typescript": "^2.5.2 || ^3.0 || ^4.0"
+        "typescript": "^4.0"
     },
     "devDependencies": {
         "@types/jest": "^25.2.1",
@@ -33,7 +33,7 @@
         "jest-specific-snapshot": "^2.0.0",
         "ts-jest": "24.3.0",
         "ts-node": "^8.0.2",
-        "typescript": "^3.3.1"
+        "typescript": "~4.2"
     },
     "files": [
         "dist"

src/__tests__/baselines/base/issue33.ts.baseline

@@ -45,5 +45,13 @@ TypeScript after transform:
   const Button4 = _.extend \` color: red \`;
 
 
+TypeScript after transpile module:
+
+  const Button1 = Button.extend \` color: red \`;
+  const Button2 = $.extend \` color: red \`;
+  const Button3 = jQuery.extend \` color: red \`;
+  const Button4 = _.extend \` color: red \`;
+
+
 
 `;

src/__tests__/baselines/base/sample1.ts.baseline

@@ -40,7 +40,7 @@ Source code:
 
 TypeScript before transform:
 
-  import styled from "styled-components";
+  import styled from 'styled-components';
   const Button = styled.button \`
     color: red;
   \`;
@@ -60,7 +60,7 @@ TypeScript before transform:
   export const SmallButton = Button.extend \`
     font-size: .7em;
   \`;
-  const MiniButton = styled(SmallButton).attrs({ size: "mini" }) \`
+  const MiniButton = styled(SmallButton).attrs({ size: 'mini' }) \`
     font-size: .1em;
   \`;
 
@@ -87,7 +87,33 @@ TypeScript after transform:
   export const SmallButton = Button.extend \`
     font-size: .7em;
   \`;
-  const MiniButton = styled(SmallButton).attrs({ size: "mini" }).withConfig({ displayName: "MiniButton" }) \`
+  const MiniButton = styled(SmallButton).attrs({ size: 'mini' }).withConfig({ displayName: "MiniButton" }) \`
+    font-size: .1em;
+  \`;
+
+
+TypeScript after transpile module:
+
+  import styled from 'styled-components';
+  const Button = styled.button.withConfig({ displayName: "Button" }) \`
+    color: red;
+  \`;
+  const NonButton = nonStyled.button \`
+    yo
+  \`;
+  const OtherButton = styled(Button).withConfig({ displayName: "OtherButton" }) \`
+    color: blue;
+  \`;
+  const SuperButton = Button.extend \`
+    color: super;
+  \`;
+  export default styled.link \`
+    color: black;
+  \`;
+  export const SmallButton = Button.extend \`
+    font-size: .7em;
+  \`;
+  const MiniButton = styled(SmallButton).attrs({ size: 'mini' }).withConfig({ displayName: "MiniButton" }) \`
     font-size: .1em;
   \`;
 

src/__tests__/baselines/base/sample2.ts.baseline

@@ -15,7 +15,7 @@ Source code:
 
 TypeScript before transform:
 
-  import styled from "styled-components";
+  import styled from 'styled-components';
   const styled2 = styled;
   const NonButton = styled.button;
   const NonStyled = styled \`  color: red; \`;
@@ -31,5 +31,14 @@ TypeScript after transform:
   const Link = styled(NonStyled).withConfig({ displayName: "Link" }) \` color: red; \`;
 
 
+TypeScript after transpile module:
+
+  import styled from 'styled-components';
+  const styled2 = styled;
+  const NonButton = styled.button;
+  const NonStyled = styled \`  color: red; \`;
+  const Link = styled(NonStyled).withConfig({ displayName: "Link" }) \` color: red; \`;
+
+
 
 `;

src/__tests__/baselines/base/sample3.tsx.baseline

@@ -24,14 +24,14 @@ Source code:
 
 TypeScript before transform:
 
-  import * as React from "react";
-  import styled from "../themed-styled";
-  import { SmallButton } from "./sample1";
+  import * as React from 'react';
+  import styled from '../themed-styled';
+  import { SmallButton } from './sample1';
   interface LabelProps {
       size: number;
   }
   const CustomLabel = styled.label \`
-      font-size: \${(props: LabelProps) => props.size + "px"}
+      font-size: \${(props: LabelProps) => props.size + 'px'}
   \`;
   const LabeledLink = () => <SmallButton />;
   export default CustomLabel;
@@ -52,5 +52,15 @@ TypeScript after transform:
   export default CustomLabel;
 
 
+TypeScript after transpile module:
+
+  import styled from '../themed-styled';
+  const CustomLabel = styled.label.withConfig({ displayName: "CustomLabel" }) \`
+      font-size: \${(props) => props.size + 'px'}
+  \`;
+  const LabeledLink = () => />;;
+  export default CustomLabel;
+
+
 
 `;

src/__tests__/baselines/base/style-objects.ts.baseline

@@ -42,26 +42,26 @@ TypeScript before transform:
 
   declare const styled: any;
   const Button = styled.button({
-      color: "red"
+      color: 'red'
   });
   declare const nonStyled: any;
   const NonButton = nonStyled.button({
-      color: "red"
+      color: 'red'
   });
   const OtherButton = styled(Button)({
-      color: "blue"
+      color: 'blue'
   });
   const SuperButton = Button.extend({
-      color: "super"
+      color: 'super'
   });
   export default styled.link({
-      color: "black"
+      color: 'black'
   });
   export const SmallButton = Button.extend({
-      fontSize: ".7em"
+      fontSize: '.7em'
   });
-  const MiniButton = styled(SmallButton).attrs({ size: "mini" })({
-      fontSize: ".1em"
+  const MiniButton = styled(SmallButton).attrs({ size: 'mini' })({
+      fontSize: '.1em'
   });
 
 
@@ -87,7 +87,32 @@ TypeScript after transform:
   export const SmallButton = Button.extend({
       fontSize: '.7em'
   });
-  const MiniButton = styled(SmallButton).attrs({ size: "mini" }).withConfig({ displayName: "MiniButton" })({
+  const MiniButton = styled(SmallButton).attrs({ size: 'mini' }).withConfig({ displayName: "MiniButton" })({
+      fontSize: '.1em'
+  });
+
+
+TypeScript after transpile module:
+
+  const Button = styled.button.withConfig({ displayName: "Button" })({
+      color: 'red'
+  });
+  const NonButton = nonStyled.button({
+      color: 'red'
+  });
+  const OtherButton = styled(Button).withConfig({ displayName: "OtherButton" })({
+      color: 'blue'
+  });
+  const SuperButton = Button.extend({
+      color: 'super'
+  });
+  export default styled.link({
+      color: 'black'
+  });
+  export const SmallButton = Button.extend({
+      fontSize: '.7em'
+  });
+  const MiniButton = styled(SmallButton).attrs({ size: 'mini' }).withConfig({ displayName: "MiniButton" })({
       fontSize: '.1em'
   });
 

src/__tests__/baselines/componentIdPrefix/issue33.ts.baseline

@@ -45,5 +45,13 @@ TypeScript after transform:
   const Button4 = _.extend \` color: red \`;
 
 
+TypeScript after transpile module:
+
+  const Button1 = Button.extend \` color: red \`;
+  const Button2 = $.extend \` color: red \`;
+  const Button3 = jQuery.extend \` color: red \`;
+  const Button4 = _.extend \` color: red \`;
+
+
 
 `;

src/__tests__/baselines/componentIdPrefix/multiple-components.tsx.baseline

@@ -24,7 +24,7 @@ Source code:
 
 TypeScript before transform:
 
-  import styled from "styled-components";
+  import styled from 'styled-components';
   export function createButtons() {
       const A = styled.button \` color: red; \`;
       const B = styled(A) \` color: blue; \`;
@@ -41,13 +41,28 @@ TypeScript after transform:
 
   import styled from 'styled-components';
   export function createButtons() {
-      const A = styled.button.withConfig({ displayName: "test-A", componentId: "test-hana72" }) \` color: red; \`;
-      const B = styled(A).withConfig({ displayName: "test-B", componentId: "test-ke4nds" }) \` color: blue; \`;
+      const A = styled.button.withConfig({ displayName: "test-A", componentId: "test-h2cmto" }) \` color: red; \`;
+      const B = styled(A).withConfig({ displayName: "test-B", componentId: "test-3cja5" }) \` color: blue; \`;
+      return { A, B };
+  }
+  export function createDivs() {
+      const A = styled.div.withConfig({ displayName: "test-A", componentId: "test-1oubriv" }) \` color: green; \`;
+      const B = styled(A).withConfig({ displayName: "test-B", componentId: "test-lfixbl" }) \` color: yellow; \`;
+      return { A, B };
+  }
+
+
+TypeScript after transpile module:
+
+  import styled from 'styled-components';
+  export function createButtons() {
+      const A = styled.button.withConfig({ displayName: "test-A", componentId: "test-1lfj0gb" }) \` color: red; \`;
+      const B = styled(A).withConfig({ displayName: "test-B", componentId: "test-kjhsv6" }) \` color: blue; \`;
       return { A, B };
   }
   export function createDivs() {
-      const A = styled.div.withConfig({ displayName: "test-A", componentId: "test-1q7vmnt" }) \` color: green; \`;
-      const B = styled(A).withConfig({ displayName: "test-B", componentId: "test-7q8oop" }) \` color: yellow; \`;
+      const A = styled.div.withConfig({ displayName: "test-A", componentId: "test-wzcq75" }) \` color: green; \`;
+      const B = styled(A).withConfig({ displayName: "test-B", componentId: "test-6zek9o" }) \` color: yellow; \`;
       return { A, B };
   }
 

src/__tests__/baselines/componentIdPrefix/sample1.ts.baseline

@@ -40,7 +40,7 @@ Source code:
 
 TypeScript before transform:
 
-  import styled from "styled-components";
+  import styled from 'styled-components';
   const Button = styled.button \`
     color: red;
   \`;
@@ -60,22 +60,22 @@ TypeScript before transform:
   export const SmallButton = Button.extend \`
     font-size: .7em;
   \`;
-  const MiniButton = styled(SmallButton).attrs({ size: "mini" }) \`
+  const MiniButton = styled(SmallButton).attrs({ size: 'mini' }) \`
     font-size: .1em;
   \`;
 
 
 TypeScript after transform:
 
   import styled from 'styled-components';
-  const Button = styled.button.withConfig({ displayName: "test-Button", componentId: "test-1okqsxw" }) \`
+  const Button = styled.button.withConfig({ displayName: "test-Button", componentId: "test-uezo0r" }) \`
     color: red;
   \`;
   declare const nonStyled: any;
   const NonButton = nonStyled.button \`
     yo
   \`;
-  const OtherButton = styled(Button).withConfig({ displayName: "test-OtherButton", componentId: "test-ce0fkl" }) \`
+  const OtherButton = styled(Button).withConfig({ displayName: "test-OtherButton", componentId: "test-1x4ml5" }) \`
     color: blue;
   \`;
   const SuperButton = Button.extend \`
@@ -87,7 +87,33 @@ TypeScript after transform:
   export const SmallButton = Button.extend \`
     font-size: .7em;
   \`;
-  const MiniButton = styled(SmallButton).attrs({ size: "mini" }).withConfig({ displayName: "test-MiniButton", componentId: "test-ndnumj" }) \`
+  const MiniButton = styled(SmallButton).attrs({ size: 'mini' }).withConfig({ displayName: "test-MiniButton", componentId: "test-1ktoxg0" }) \`
+    font-size: .1em;
+  \`;
+
+
+TypeScript after transpile module:
+
+  import styled from 'styled-components';
+  const Button = styled.button.withConfig({ displayName: "test-Button", componentId: "test-1nbxxpw" }) \`
+    color: red;
+  \`;
+  const NonButton = nonStyled.button \`
+    yo
+  \`;
+  const OtherButton = styled(Button).withConfig({ displayName: "test-OtherButton", componentId: "test-17xltiv" }) \`
+    color: blue;
+  \`;
+  const SuperButton = Button.extend \`
+    color: super;
+  \`;
+  export default styled.link.withConfig({ componentId: "test-ep20on" }) \`
+    color: black;
+  \`;
+  export const SmallButton = Button.extend \`
+    font-size: .7em;
+  \`;
+  const MiniButton = styled(SmallButton).attrs({ size: 'mini' }).withConfig({ displayName: "test-MiniButton", componentId: "test-am1bk" }) \`
     font-size: .1em;
   \`;
 

src/__tests__/baselines/componentIdPrefix/sample2.ts.baseline

@@ -15,7 +15,7 @@ Source code:
 
 TypeScript before transform:
 
-  import styled from "styled-components";
+  import styled from 'styled-components';
   const styled2 = styled;
   const NonButton = styled.button;
   const NonStyled = styled \`  color: red; \`;
@@ -28,7 +28,16 @@ TypeScript after transform:
   const styled2 = styled;
   const NonButton = styled.button;
   const NonStyled = styled \`  color: red; \`;
-  const Link = styled(NonStyled).withConfig({ displayName: "test-Link", componentId: "test-1xlc242" }) \` color: red; \`;
+  const Link = styled(NonStyled).withConfig({ displayName: "test-Link", componentId: "test-1gbt9xq" }) \` color: red; \`;
+
+
+TypeScript after transpile module:
+
+  import styled from 'styled-components';
+  const styled2 = styled;
+  const NonButton = styled.button;
+  const NonStyled = styled \`  color: red; \`;
+  const Link = styled(NonStyled).withConfig({ displayName: "test-Link", componentId: "test-gbrvon" }) \` color: red; \`;