Skip to content

Commit bf7679c

Browse files
IgorbekIgorbek
authored
Merge pull request #379 from Igorbek/simplify-transformer-ts4
Upgrade to TypeScript 4.2 and update transformer
2 parents 13b6a71 + 2dddad3 commit bf7679c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+827
-208
lines changed

‎CHANGELOG.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ All notable changes to this project will be documented in this file.
33

44
## [Unreleased]
55

6+
- **breaking change** upgrade to TypeScript 4+ and make use of Factory API (#379)
7+
68
## [1.6.0]
79

810
- namespace prefix to help multiple instances of the library not clash (fix #381 in #395)

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
},
2222
"typings": "dist/index.d.ts",
2323
"peerDependencies": {
24-
"typescript": "^2.5.2 || ^3.0 || ^4.0"
24+
"typescript": "^4.0"
2525
},
2626
"devDependencies": {
2727
"@types/jest": "^25.2.1",
@@ -33,7 +33,7 @@
3333
"jest-specific-snapshot": "^2.0.0",
3434
"ts-jest": "24.3.0",
3535
"ts-node": "^8.0.2",
36-
"typescript": "^3.3.1"
36+
"typescript": "~4.2"
3737
},
3838
"files": [
3939
"dist"

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,5 +45,13 @@ TypeScript after transform:
4545
const Button4 = _.extend \` color: red \`;
4646

4747

48+
TypeScript after transpile module:
49+
50+
const Button1 = Button.extend \` color: red \`;
51+
const Button2 = $.extend \` color: red \`;
52+
const Button3 = jQuery.extend \` color: red \`;
53+
const Button4 = _.extend \` color: red \`;
54+
55+
4856

4957
`;

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

Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ Source code:
4040

4141
TypeScript before transform:
4242

43-
import styled from "styled-components";
43+
import styled from 'styled-components';
4444
const Button = styled.button \`
4545
color: red;
4646
\`;
@@ -60,7 +60,7 @@ TypeScript before transform:
6060
export const SmallButton = Button.extend \`
6161
font-size: .7em;
6262
\`;
63-
const MiniButton = styled(SmallButton).attrs({ size: "mini" }) \`
63+
const MiniButton = styled(SmallButton).attrs({ size: 'mini' }) \`
6464
font-size: .1em;
6565
\`;
6666

@@ -87,7 +87,33 @@ TypeScript after transform:
8787
export const SmallButton = Button.extend \`
8888
font-size: .7em;
8989
\`;
90-
const MiniButton = styled(SmallButton).attrs({ size: "mini" }).withConfig({ displayName: "MiniButton" }) \`
90+
const MiniButton = styled(SmallButton).attrs({ size: 'mini' }).withConfig({ displayName: "MiniButton" }) \`
91+
font-size: .1em;
92+
\`;
93+
94+
95+
TypeScript after transpile module:
96+
97+
import styled from 'styled-components';
98+
const Button = styled.button.withConfig({ displayName: "Button" }) \`
99+
color: red;
100+
\`;
101+
const NonButton = nonStyled.button \`
102+
yo
103+
\`;
104+
const OtherButton = styled(Button).withConfig({ displayName: "OtherButton" }) \`
105+
color: blue;
106+
\`;
107+
const SuperButton = Button.extend \`
108+
color: super;
109+
\`;
110+
export default styled.link \`
111+
color: black;
112+
\`;
113+
export const SmallButton = Button.extend \`
114+
font-size: .7em;
115+
\`;
116+
const MiniButton = styled(SmallButton).attrs({ size: 'mini' }).withConfig({ displayName: "MiniButton" }) \`
91117
font-size: .1em;
92118
\`;
93119

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

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ Source code:
1515

1616
TypeScript before transform:
1717

18-
import styled from "styled-components";
18+
import styled from 'styled-components';
1919
const styled2 = styled;
2020
const NonButton = styled.button;
2121
const NonStyled = styled \` color: red; \`;
@@ -31,5 +31,14 @@ TypeScript after transform:
3131
const Link = styled(NonStyled).withConfig({ displayName: "Link" }) \` color: red; \`;
3232

3333

34+
TypeScript after transpile module:
35+
36+
import styled from 'styled-components';
37+
const styled2 = styled;
38+
const NonButton = styled.button;
39+
const NonStyled = styled \` color: red; \`;
40+
const Link = styled(NonStyled).withConfig({ displayName: "Link" }) \` color: red; \`;
41+
42+
3443

3544
`;

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

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,14 @@ Source code:
2424

2525
TypeScript before transform:
2626

27-
import * as React from "react";
28-
import styled from "../themed-styled";
29-
import { SmallButton } from "./sample1";
27+
import * as React from 'react';
28+
import styled from '../themed-styled';
29+
import { SmallButton } from './sample1';
3030
interface LabelProps {
3131
size: number;
3232
}
3333
const CustomLabel = styled.label \`
34-
font-size: \${(props: LabelProps) => props.size + "px"}
34+
font-size: \${(props: LabelProps) => props.size + 'px'}
3535
\`;
3636
const LabeledLink = () => <SmallButton />;
3737
export default CustomLabel;
@@ -52,5 +52,15 @@ TypeScript after transform:
5252
export default CustomLabel;
5353

5454

55+
TypeScript after transpile module:
56+
57+
import styled from '../themed-styled';
58+
const CustomLabel = styled.label.withConfig({ displayName: "CustomLabel" }) \`
59+
font-size: \${(props) => props.size + 'px'}
60+
\`;
61+
const LabeledLink = () => />;;
62+
export default CustomLabel;
63+
64+
5565

5666
`;

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

Lines changed: 34 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -42,26 +42,26 @@ TypeScript before transform:
4242

4343
declare const styled: any;
4444
const Button = styled.button({
45-
color: "red"
45+
color: 'red'
4646
});
4747
declare const nonStyled: any;
4848
const NonButton = nonStyled.button({
49-
color: "red"
49+
color: 'red'
5050
});
5151
const OtherButton = styled(Button)({
52-
color: "blue"
52+
color: 'blue'
5353
});
5454
const SuperButton = Button.extend({
55-
color: "super"
55+
color: 'super'
5656
});
5757
export default styled.link({
58-
color: "black"
58+
color: 'black'
5959
});
6060
export const SmallButton = Button.extend({
61-
fontSize: ".7em"
61+
fontSize: '.7em'
6262
});
63-
const MiniButton = styled(SmallButton).attrs({ size: "mini" })({
64-
fontSize: ".1em"
63+
const MiniButton = styled(SmallButton).attrs({ size: 'mini' })({
64+
fontSize: '.1em'
6565
});
6666

6767

@@ -87,7 +87,32 @@ TypeScript after transform:
8787
export const SmallButton = Button.extend({
8888
fontSize: '.7em'
8989
});
90-
const MiniButton = styled(SmallButton).attrs({ size: "mini" }).withConfig({ displayName: "MiniButton" })({
90+
const MiniButton = styled(SmallButton).attrs({ size: 'mini' }).withConfig({ displayName: "MiniButton" })({
91+
fontSize: '.1em'
92+
});
93+
94+
95+
TypeScript after transpile module:
96+
97+
const Button = styled.button.withConfig({ displayName: "Button" })({
98+
color: 'red'
99+
});
100+
const NonButton = nonStyled.button({
101+
color: 'red'
102+
});
103+
const OtherButton = styled(Button).withConfig({ displayName: "OtherButton" })({
104+
color: 'blue'
105+
});
106+
const SuperButton = Button.extend({
107+
color: 'super'
108+
});
109+
export default styled.link({
110+
color: 'black'
111+
});
112+
export const SmallButton = Button.extend({
113+
fontSize: '.7em'
114+
});
115+
const MiniButton = styled(SmallButton).attrs({ size: 'mini' }).withConfig({ displayName: "MiniButton" })({
91116
fontSize: '.1em'
92117
});
93118

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,5 +45,13 @@ TypeScript after transform:
4545
const Button4 = _.extend \` color: red \`;
4646

4747

48+
TypeScript after transpile module:
49+
50+
const Button1 = Button.extend \` color: red \`;
51+
const Button2 = $.extend \` color: red \`;
52+
const Button3 = jQuery.extend \` color: red \`;
53+
const Button4 = _.extend \` color: red \`;
54+
55+
4856

4957
`;

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

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ Source code:
2424

2525
TypeScript before transform:
2626

27-
import styled from "styled-components";
27+
import styled from 'styled-components';
2828
export function createButtons() {
2929
const A = styled.button \` color: red; \`;
3030
const B = styled(A) \` color: blue; \`;
@@ -41,13 +41,28 @@ TypeScript after transform:
4141

4242
import styled from 'styled-components';
4343
export function createButtons() {
44-
const A = styled.button.withConfig({ displayName: "test-A", componentId: "test-hana72" }) \` color: red; \`;
45-
const B = styled(A).withConfig({ displayName: "test-B", componentId: "test-ke4nds" }) \` color: blue; \`;
44+
const A = styled.button.withConfig({ displayName: "test-A", componentId: "test-h2cmto" }) \` color: red; \`;
45+
const B = styled(A).withConfig({ displayName: "test-B", componentId: "test-3cja5" }) \` color: blue; \`;
46+
return { A, B };
47+
}
48+
export function createDivs() {
49+
const A = styled.div.withConfig({ displayName: "test-A", componentId: "test-1oubriv" }) \` color: green; \`;
50+
const B = styled(A).withConfig({ displayName: "test-B", componentId: "test-lfixbl" }) \` color: yellow; \`;
51+
return { A, B };
52+
}
53+
54+
55+
TypeScript after transpile module:
56+
57+
import styled from 'styled-components';
58+
export function createButtons() {
59+
const A = styled.button.withConfig({ displayName: "test-A", componentId: "test-1lfj0gb" }) \` color: red; \`;
60+
const B = styled(A).withConfig({ displayName: "test-B", componentId: "test-kjhsv6" }) \` color: blue; \`;
4661
return { A, B };
4762
}
4863
export function createDivs() {
49-
const A = styled.div.withConfig({ displayName: "test-A", componentId: "test-1q7vmnt" }) \` color: green; \`;
50-
const B = styled(A).withConfig({ displayName: "test-B", componentId: "test-7q8oop" }) \` color: yellow; \`;
64+
const A = styled.div.withConfig({ displayName: "test-A", componentId: "test-wzcq75" }) \` color: green; \`;
65+
const B = styled(A).withConfig({ displayName: "test-B", componentId: "test-6zek9o" }) \` color: yellow; \`;
5166
return { A, B };
5267
}
5368

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

Lines changed: 31 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ Source code:
4040

4141
TypeScript before transform:
4242

43-
import styled from "styled-components";
43+
import styled from 'styled-components';
4444
const Button = styled.button \`
4545
color: red;
4646
\`;
@@ -60,22 +60,22 @@ TypeScript before transform:
6060
export const SmallButton = Button.extend \`
6161
font-size: .7em;
6262
\`;
63-
const MiniButton = styled(SmallButton).attrs({ size: "mini" }) \`
63+
const MiniButton = styled(SmallButton).attrs({ size: 'mini' }) \`
6464
font-size: .1em;
6565
\`;
6666

6767

6868
TypeScript after transform:
6969

7070
import styled from 'styled-components';
71-
const Button = styled.button.withConfig({ displayName: "test-Button", componentId: "test-1okqsxw" }) \`
71+
const Button = styled.button.withConfig({ displayName: "test-Button", componentId: "test-uezo0r" }) \`
7272
color: red;
7373
\`;
7474
declare const nonStyled: any;
7575
const NonButton = nonStyled.button \`
7676
yo
7777
\`;
78-
const OtherButton = styled(Button).withConfig({ displayName: "test-OtherButton", componentId: "test-ce0fkl" }) \`
78+
const OtherButton = styled(Button).withConfig({ displayName: "test-OtherButton", componentId: "test-1x4ml5" }) \`
7979
color: blue;
8080
\`;
8181
const SuperButton = Button.extend \`
@@ -87,7 +87,33 @@ TypeScript after transform:
8787
export const SmallButton = Button.extend \`
8888
font-size: .7em;
8989
\`;
90-
const MiniButton = styled(SmallButton).attrs({ size: "mini" }).withConfig({ displayName: "test-MiniButton", componentId: "test-ndnumj" }) \`
90+
const MiniButton = styled(SmallButton).attrs({ size: 'mini' }).withConfig({ displayName: "test-MiniButton", componentId: "test-1ktoxg0" }) \`
91+
font-size: .1em;
92+
\`;
93+
94+
95+
TypeScript after transpile module:
96+
97+
import styled from 'styled-components';
98+
const Button = styled.button.withConfig({ displayName: "test-Button", componentId: "test-1nbxxpw" }) \`
99+
color: red;
100+
\`;
101+
const NonButton = nonStyled.button \`
102+
yo
103+
\`;
104+
const OtherButton = styled(Button).withConfig({ displayName: "test-OtherButton", componentId: "test-17xltiv" }) \`
105+
color: blue;
106+
\`;
107+
const SuperButton = Button.extend \`
108+
color: super;
109+
\`;
110+
export default styled.link.withConfig({ componentId: "test-ep20on" }) \`
111+
color: black;
112+
\`;
113+
export const SmallButton = Button.extend \`
114+
font-size: .7em;
115+
\`;
116+
const MiniButton = styled(SmallButton).attrs({ size: 'mini' }).withConfig({ displayName: "test-MiniButton", componentId: "test-am1bk" }) \`
91117
font-size: .1em;
92118
\`;
93119

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

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ Source code:
1515

1616
TypeScript before transform:
1717

18-
import styled from "styled-components";
18+
import styled from 'styled-components';
1919
const styled2 = styled;
2020
const NonButton = styled.button;
2121
const NonStyled = styled \` color: red; \`;
@@ -28,7 +28,16 @@ TypeScript after transform:
2828
const styled2 = styled;
2929
const NonButton = styled.button;
3030
const NonStyled = styled \` color: red; \`;
31-
const Link = styled(NonStyled).withConfig({ displayName: "test-Link", componentId: "test-1xlc242" }) \` color: red; \`;
31+
const Link = styled(NonStyled).withConfig({ displayName: "test-Link", componentId: "test-1gbt9xq" }) \` color: red; \`;
32+
33+
34+
TypeScript after transpile module:
35+
36+
import styled from 'styled-components';
37+
const styled2 = styled;
38+
const NonButton = styled.button;
39+
const NonStyled = styled \` color: red; \`;
40+
const Link = styled(NonStyled).withConfig({ displayName: "test-Link", componentId: "test-gbrvon" }) \` color: red; \`;
3241

3342

3443

0 commit comments

Comments
 (0)