Skip to content

Commit 84df8b7

Browse files
author
fabyo82
authored
Merge pull request #2 from Igorbek/pr-fabyo82-21
Addition to PR
2 parents 688d2c7 + b9a44e0 commit 84df8b7

File tree

9 files changed

+1199
-8012
lines changed

9 files changed

+1199
-8012
lines changed

‎package-lock.json‎

Lines changed: 0 additions & 5841 deletions
This file was deleted.

‎package.json‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,14 +23,14 @@
2323
"typescript": "^2.5.2 || ^3.0"
2424
},
2525
"devDependencies": {
26-
"@types/jest": "^23.3.9",
27-
"@types/node": "^10.12.9",
28-
"@types/react": "^16.7.6",
29-
"jest": "^23.6.0",
30-
"styled-components": "^4.1.1",
31-
"ts-jest": "^23.10.4",
32-
"ts-node": "^7.0.1",
33-
"typescript": "^3.1.6"
26+
"@types/jest": "^19.2.4",
27+
"@types/node": "^7.0.31",
28+
"@types/react": "^16.3.13",
29+
"styled-components": "^2.1.2",
30+
"jest": "20",
31+
"ts-jest": "20",
32+
"ts-node": "^3.3.0",
33+
"typescript": "^2.8.3"
3434
},
3535
"files": [
3636
"dist"

‎src/__tests__/__snapshots__/ssr-baselines.test.ts.snap‎

Lines changed: 224 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,224 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`multiple-components.tsx 1`] = `
4+
5+
File: multiple-components.tsx
6+
Source code:
7+
8+
import styled from 'styled-components';
9+
10+
export function createButtons() {
11+
const A = styled.button\` color: red; \`;
12+
const B = styled(A)\` color: blue; \`;
13+
14+
return { A, B };
15+
}
16+
17+
export function createDivs() {
18+
const A = styled.div\` color: green; \`;
19+
const B = styled(A)\` color: yellow; \`;
20+
21+
return { A, B };
22+
}
23+
24+
25+
TypeScript before transform:
26+
27+
import styled from "styled-components";
28+
export function createButtons() {
29+
const A = styled.button \` color: red; \`;
30+
const B = styled(A) \` color: blue; \`;
31+
return { A, B };
32+
}
33+
export function createDivs() {
34+
const A = styled.div \` color: green; \`;
35+
const B = styled(A) \` color: yellow; \`;
36+
return { A, B };
37+
}
38+
39+
40+
TypeScript after transform:
41+
42+
import styled from 'styled-components';
43+
export function createButtons() {
44+
const A = styled.button.withConfig({ displayName: "A", componentId: "ssr-12flnm5" }) \` color: red; \`;
45+
const B = styled(A).withConfig({ displayName: "B", componentId: "ssr-1nka2f9" }) \` color: blue; \`;
46+
return { A, B };
47+
}
48+
export function createDivs() {
49+
const A = styled.div.withConfig({ displayName: "A", componentId: "ssr-12flnm5" }) \` color: green; \`;
50+
const B = styled(A).withConfig({ displayName: "B", componentId: "ssr-1nka2f9" }) \` color: yellow; \`;
51+
return { A, B };
52+
}
53+
54+
55+
56+
`;
57+
58+
exports[`sample1.ts 1`] = `
59+
60+
File: sample1.ts
61+
Source code:
62+
63+
import styled from 'styled-components';
64+
65+
const Button = styled.button\`
66+
color: red;
67+
\`;
68+
69+
declare const nonStyled: any;
70+
71+
const NonButton = nonStyled.button\`
72+
yo
73+
\`;
74+
75+
const OtherButton = styled(Button)\`
76+
color: blue;
77+
\`;
78+
79+
const SuperButton = Button.extend\`
80+
color: super;
81+
\`;
82+
83+
export default styled.link\`
84+
color: black;
85+
\`;
86+
87+
export const SmallButton = Button.extend\`
88+
font-size: .7em;
89+
\`;
90+
91+
const MiniButton = styled(SmallButton).attrs({ size: 'mini' })\`
92+
font-size: .1em;
93+
\`;
94+
95+
96+
TypeScript before transform:
97+
98+
import styled from "styled-components";
99+
const Button = styled.button \`\\n color: red;\\n\`;
100+
declare const nonStyled: any;
101+
const NonButton = nonStyled.button \`\\n yo\\n\`;
102+
const OtherButton = styled(Button) \`\\n color: blue;\\n\`;
103+
const SuperButton = Button.extend \`\\n color: super;\\n\`;
104+
export default styled.link \`\\n color: black;\\n\`;
105+
export const SmallButton = Button.extend \`\\n font-size: .7em;\\n\`;
106+
const MiniButton = styled(SmallButton).attrs({ size: "mini" }) \`\\n font-size: .1em;\\n\`;
107+
108+
109+
TypeScript after transform:
110+
111+
import styled from 'styled-components';
112+
const Button = styled.button.withConfig({ displayName: "Button", componentId: "ssr-mm3di7" }) \`
113+
color: red;
114+
\`;
115+
declare const nonStyled: any;
116+
const NonButton = nonStyled.button \`
117+
yo
118+
\`;
119+
const OtherButton = styled(Button).withConfig({ displayName: "OtherButton", componentId: "ssr-j426hc" }) \`
120+
color: blue;
121+
\`;
122+
const SuperButton = Button.extend.withConfig({ displayName: "SuperButton", componentId: "ssr-w8sv2y" }) \`
123+
color: super;
124+
\`;
125+
export default styled.link \`
126+
color: black;
127+
\`;
128+
export const SmallButton = Button.extend.withConfig({ displayName: "SmallButton", componentId: "ssr-f57us" }) \`
129+
font-size: .7em;
130+
\`;
131+
const MiniButton = styled(SmallButton).attrs({ size: "mini" }).withConfig({ displayName: "MiniButton", componentId: "ssr-feuq4j" }) \`
132+
font-size: .1em;
133+
\`;
134+
135+
136+
137+
`;
138+
139+
exports[`sample2.ts 1`] = `
140+
141+
File: sample2.ts
142+
Source code:
143+
144+
import styled from 'styled-components';
145+
146+
const styled2 = styled;
147+
const NonButton = styled.button;
148+
const NonStyled = styled\` color: red; \`;
149+
const Link = styled(NonStyled)\` color: red; \`;
150+
151+
152+
TypeScript before transform:
153+
154+
import styled from "styled-components";
155+
const styled2 = styled;
156+
const NonButton = styled.button;
157+
const NonStyled = styled \` color: red; \`;
158+
const Link = styled(NonStyled) \` color: red; \`;
159+
160+
161+
TypeScript after transform:
162+
163+
import styled from 'styled-components';
164+
const styled2 = styled;
165+
const NonButton = styled.button;
166+
const NonStyled = styled \` color: red; \`;
167+
const Link = styled(NonStyled).withConfig({ displayName: "Link", componentId: "ssr-1bdnxv3" }) \` color: red; \`;
168+
169+
170+
171+
`;
172+
173+
exports[`sample3.tsx 1`] = `
174+
175+
File: sample3.tsx
176+
Source code:
177+
178+
import * as React from 'react';
179+
import styled from '../themed-styled';
180+
import { SmallButton } from './sample1';
181+
182+
interface LabelProps {
183+
size: number;
184+
}
185+
186+
const CustomLabel = styled.label\`
187+
font-size: \${(props: LabelProps) => props.size + 'px'}
188+
\`;
189+
190+
const LabeledLink = () => <SmallButton />;
191+
192+
export default CustomLabel;
193+
194+
195+
TypeScript before transform:
196+
197+
import * as React from "react";
198+
import styled from "../themed-styled";
199+
import { SmallButton } from "./sample1";
200+
interface LabelProps {
201+
size: number;
202+
}
203+
const CustomLabel = styled.label \`\\n font-size: \${(props: LabelProps) => props.size + "px"}\\n\`;
204+
const LabeledLink = () => <SmallButton />;
205+
export default CustomLabel;
206+
207+
208+
TypeScript after transform:
209+
210+
import * as React from 'react';
211+
import styled from '../themed-styled';
212+
import { SmallButton } from './sample1';
213+
interface LabelProps {
214+
size: number;
215+
}
216+
const CustomLabel = styled.label.withConfig({ displayName: "CustomLabel", componentId: "ssr-vgngw" }) \`
217+
font-size: \${(props: LabelProps) => props.size + 'px'}
218+
\`;
219+
const LabeledLink = () => <SmallButton />;
220+
export default CustomLabel;
221+
222+
223+
224+
`;

‎src/__tests__/baselines.test.ts‎

Lines changed: 2 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,6 @@
1-
import 'jest';
2-
import * as ts from 'typescript';
3-
import * as fs from 'fs';
41
import createTransformer from '../';
2+
import { expectBaselineTransforms } from './expectTransform';
53

6-
const printer = ts.createPrinter();
74
const transformer = createTransformer();
85

9-
interface TransformBaseline {
10-
type: 'transform-baseline';
11-
filename: string;
12-
content: string;
13-
source: string;
14-
transformed: string;
15-
}
16-
17-
(expect as any).addSnapshotSerializer({
18-
test: obj => obj && obj.type === 'transform-baseline',
19-
print: (obj: TransformBaseline, print: (object: any) => string, indent: (str: string) => string) => `
20-
File: ${obj.filename}
21-
Source code:
22-
23-
${indent(obj.content)}
24-
25-
TypeScript before transform:
26-
27-
${indent(obj.source)}
28-
29-
TypeScript after transform:
30-
31-
${indent(obj.transformed)}
32-
33-
`
34-
});
35-
36-
37-
function expectTransform(filename: string) {
38-
const content = fs.readFileSync(__dirname + '/baselines/' + filename).toString();
39-
const sourceFile = ts.createSourceFile(filename, content, ts.ScriptTarget.Latest);
40-
const source = printer.printFile(sourceFile);
41-
const transformedFile = ts.transform(sourceFile, [transformer]).transformed[0];
42-
const transformed = printer.printFile(transformedFile);
43-
44-
const snapshot: TransformBaseline = {
45-
type: 'transform-baseline',
46-
filename,
47-
content,
48-
source,
49-
transformed
50-
};
51-
52-
expect(snapshot).toMatchSnapshot(filename);
53-
}
54-
55-
const files = fs.readdirSync(__dirname + '/baselines')
56-
.filter(f => f.toLowerCase().endsWith('.tsx') || f.toLowerCase().endsWith('.ts'));
57-
58-
files.forEach(file => it(file, () => expectTransform(file)));
6+
expectBaselineTransforms(transformer, __dirname + '/baselines');

‎src/__tests__/expectTransform.ts‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import 'jest';
2+
import * as ts from 'typescript';
3+
import * as fs from 'fs';
4+
5+
const printer = ts.createPrinter();
6+
7+
interface TransformBaseline {
8+
type: 'transform-baseline';
9+
filename: string;
10+
content: string;
11+
source: string;
12+
transformed: string;
13+
}
14+
15+
(expect as any).addSnapshotSerializer({
16+
test: obj => obj && obj.type === 'transform-baseline',
17+
print: (obj: TransformBaseline, print: (object: any) => string, indent: (str: string) => string) => `
18+
File: ${obj.filename}
19+
Source code:
20+
21+
${indent(obj.content)}
22+
23+
TypeScript before transform:
24+
25+
${indent(obj.source)}
26+
27+
TypeScript after transform:
28+
29+
${indent(obj.transformed)}
30+
31+
`
32+
});
33+
34+
export function expectTransform(transformer: ts.TransformerFactory<ts.SourceFile>, filename: string, path: string) {
35+
const content = fs.readFileSync(path + '/' + filename).toString();
36+
const sourceFile = ts.createSourceFile(filename, content, ts.ScriptTarget.Latest);
37+
const source = printer.printFile(sourceFile);
38+
const transformedFile = ts.transform(sourceFile, [transformer]).transformed[0];
39+
const transformed = printer.printFile(transformedFile);
40+
41+
const snapshot: TransformBaseline = {
42+
type: 'transform-baseline',
43+
filename,
44+
content,
45+
source,
46+
transformed
47+
};
48+
49+
expect(snapshot).toMatchSnapshot(filename);
50+
}
51+
52+
export function expectBaselineTransforms(transformer: ts.TransformerFactory<ts.SourceFile>, path: string) {
53+
const files = fs.readdirSync(path)
54+
.filter(f => f.toLowerCase().endsWith('.tsx') || f.toLowerCase().endsWith('.ts'));
55+
56+
files.forEach(file => it(file, () => expectTransform(transformer, file, path)));
57+
}

‎src/__tests__/ssr-baselines.test.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import createTransformer from '../';
2+
import { expectBaselineTransforms } from './expectTransform';
3+
4+
const transformer = createTransformer({
5+
ssr: true
6+
});
7+
8+
expectBaselineTransforms(transformer, __dirname + '/baselines');
9+
expectBaselineTransforms(transformer, __dirname + '/ssr-baselines');

‎src/__tests__/ssr-baselines/multiple-components.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import styled from 'styled-components';
2+
3+
export function createButtons() {
4+
const A = styled.button` color: red; `;
5+
const B = styled(A)` color: blue; `;
6+
7+
return { A, B };
8+
}
9+
10+
export function createDivs() {
11+
const A = styled.div` color: green; `;
12+
const B = styled(A)` color: yellow; `;
13+
14+
return { A, B };
15+
}

0 commit comments

Comments
 (0)