Skip to content

Commit 977b717

Browse files
armandabricarmandabric
committed
Solve TS issues
1 parent 7d4d6ed commit 977b717

15 files changed

+56
-40
lines changed

‎src/formatter/formatComplexDataStructure.spec.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
1-
import { describe, it, expect, vitest, beforeAll } from 'vitest';
2-
import React from 'react';
1+
import { describe, it, expect, vitest } from 'vitest';
2+
import React, { NamedExoticComponent } from 'react';
33
import formatComplexDataStructure from './formatComplexDataStructure';
4-
// import formatReactElementNode from './formatReactElementNode';
4+
import { Options } from '../options';
55

66
vitest.mock('./formatReactElementNode', () => ({
7-
default: (node) => `<${node.displayName} />`,
7+
default: (node: NamedExoticComponent) => `<${node.displayName} />`,
88
}));
99

1010
const createFakeReactElement = (tagName = 'Foo') =>
1111
React.createElement(tagName, {}, null);
1212

1313
const options = {
1414
tabStop: 2,
15-
};
15+
} as any as Options;
1616

1717
describe('formatComplexDataStructure', () => {
1818
// FIXME: How to convert the vitest.mock factory into a mock?

‎src/formatter/formatComplexDataStructure.ts

+6-4
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@ import parseReactElement from '../parser/parseReactElement';
55
import formatTreeNode from './formatTreeNode';
66
import formatFunction from './formatFunction';
77
import spacer from './spacer';
8-
import type { Options } from '../options';
8+
import { defaultOptions, type Options } from '../options';
99

1010
export default (
1111
value: Record<string, unknown> | Array<unknown>,
1212
inline: boolean,
1313
lvl: number,
14-
options: Options
14+
options: Partial<Options>
1515
): string => {
1616
const normalizedValue = sortObject(value);
1717

@@ -45,8 +45,10 @@ export default (
4545
.replace(/ ]/g, ']');
4646
}
4747

48+
const tabStop = options.tabStop ?? defaultOptions.tabStop;
49+
4850
// Replace tabs with spaces, and add necessary indentation in front of each new line
4951
return stringifiedValue
50-
.replace(/\t/g, spacer(1, options.tabStop))
51-
.replace(/\n([^$])/g, `\n${spacer(lvl + 1, options.tabStop)}$1`);
52+
.replace(/\t/g, spacer(1, tabStop))
53+
.replace(/\n([^$])/g, `\n${spacer(lvl + 1, tabStop)}$1`);
5254
};

‎src/formatter/formatFunction.spec.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import { describe, it, expect, vitest } from 'vitest';
22
import formatFunction from './formatFunction';
3+
import { NamedExoticComponent } from 'react';
34

45
vitest.mock(
56
'./formatReactElementNode',
6-
() => (node) => `<${node.displayName} />`
7+
() => (node: NamedExoticComponent) => `<${node.displayName} />`
78
);
89

910
function hello() {

‎src/formatter/formatFunction.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export const preserveFunctionLineBreak = (fn: Function): string =>
1414

1515
const defaultFunctionValue = inlineFunction;
1616

17-
export default (fn: Function, options: Options): string => {
17+
export default (fn: Function, options: Partial<Options>): string => {
1818
const { functionValue = defaultFunctionValue, showFunctions } = options;
1919

2020
if (!showFunctions && functionValue === defaultFunctionValue) {

‎src/formatter/formatProp.spec.ts

+16-15
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import { describe, it, expect, vitest, beforeEach } from 'vitest';
22
import formatProp from './formatProp';
33
import formatPropValue from './formatPropValue';
4+
import { Options } from '../options';
45

56
vitest.mock('./formatPropValue');
67

78
const defaultOptions = {
89
useBooleanShorthandSyntax: true,
910
tabStop: 2,
10-
};
11+
} as any as Options;
1112

1213
describe('formatProp', () => {
1314
beforeEach(() => {
@@ -16,7 +17,7 @@ describe('formatProp', () => {
1617
});
1718

1819
it('should format prop with only a value', () => {
19-
formatPropValue.mockReturnValue('"MockedPropValue"');
20+
vitest.mocked(formatPropValue).mockReturnValue('"MockedPropValue"');
2021

2122
expect(
2223
formatProp('foo', true, 'bar', false, null, true, 0, defaultOptions)
@@ -36,7 +37,7 @@ describe('formatProp', () => {
3637
});
3738

3839
it('should format prop with only a default value', () => {
39-
formatPropValue.mockReturnValue('"MockedPropValue"');
40+
vitest.mocked(formatPropValue).mockReturnValue('"MockedPropValue"');
4041

4142
expect(
4243
formatProp('foo', false, null, true, 'baz', true, 0, defaultOptions)
@@ -56,7 +57,7 @@ describe('formatProp', () => {
5657
});
5758

5859
it('should format prop with a value and a default value', () => {
59-
formatPropValue.mockReturnValue('"MockedPropValue"');
60+
vitest.mocked(formatPropValue).mockReturnValue('"MockedPropValue"');
6061

6162
expect(
6263
formatProp('foo', true, 'bar', true, 'baz', true, 0, defaultOptions)
@@ -79,9 +80,9 @@ describe('formatProp', () => {
7980
const options = {
8081
useBooleanShorthandSyntax: true,
8182
tabStop: 2,
82-
};
83+
} as Options;
8384

84-
formatPropValue.mockReturnValue('{true}');
85+
vitest.mocked(formatPropValue).mockReturnValue('{true}');
8586

8687
expect(
8788
formatProp('foo', true, true, false, false, true, 0, options)
@@ -99,9 +100,9 @@ describe('formatProp', () => {
99100
const options = {
100101
useBooleanShorthandSyntax: true,
101102
tabStop: 2,
102-
};
103+
} as Options;
103104

104-
formatPropValue.mockReturnValue('{false}');
105+
vitest.mocked(formatPropValue).mockReturnValue('{false}');
105106

106107
expect(
107108
formatProp('foo', true, false, false, null, true, 0, options)
@@ -118,9 +119,9 @@ describe('formatProp', () => {
118119
const options = {
119120
useBooleanShorthandSyntax: false,
120121
tabStop: 2,
121-
};
122+
} as Options;
122123

123-
formatPropValue.mockReturnValue('{true}');
124+
vitest.mocked(formatPropValue).mockReturnValue('{true}');
124125

125126
expect(
126127
formatProp('foo', true, true, false, false, true, 0, options)
@@ -138,9 +139,9 @@ describe('formatProp', () => {
138139
const options = {
139140
useBooleanShorthandSyntax: false,
140141
tabStop: 2,
141-
};
142+
} as Options;
142143

143-
formatPropValue.mockReturnValue('{false}');
144+
vitest.mocked(formatPropValue).mockReturnValue('{false}');
144145

145146
expect(
146147
formatProp('foo', true, false, false, false, true, 0, options)
@@ -155,7 +156,7 @@ describe('formatProp', () => {
155156
});
156157

157158
it('should format a mulitline props', () => {
158-
formatPropValue.mockReturnValue(`{[
159+
vitest.mocked(formatPropValue).mockReturnValue(`{[
159160
"a",
160161
"b"
161162
]}`);
@@ -202,9 +203,9 @@ describe('formatProp', () => {
202203
const options = {
203204
useBooleanShorthandSyntax: true,
204205
tabStop: 2,
205-
};
206+
} as Options;
206207

207-
formatPropValue.mockReturnValue('"MockedPropValue"');
208+
vitest.mocked(formatPropValue).mockReturnValue('"MockedPropValue"');
208209

209210
expect(
210211
formatProp('foo', true, 'bar', false, null, true, 4, options)

‎src/formatter/formatProp.ts

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import spacer from './spacer';
22
import formatPropValue from './formatPropValue';
3-
import type { Options } from '../options';
3+
import { defaultOptions, type Options } from '../options';
44

55
export default (
66
name: string,
@@ -10,7 +10,7 @@ export default (
1010
defaultValue: unknown,
1111
inline: boolean,
1212
lvl: number,
13-
options: Options
13+
options: Partial<Options>
1414
): {
1515
attributeFormattedInline: string;
1616
attributeFormattedMultiline: string;
@@ -24,7 +24,8 @@ export default (
2424

2525
const usedValue = hasValue ? value : defaultValue;
2626

27-
const { useBooleanShorthandSyntax, tabStop } = options;
27+
const { useBooleanShorthandSyntax, tabStop = defaultOptions.tabStop } =
28+
options;
2829

2930
const formattedPropValue = formatPropValue(usedValue, inline, lvl, options);
3031

‎src/formatter/formatPropValue.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const formatPropValue = (
1212
propValue: unknown,
1313
inline: boolean,
1414
lvl: number,
15-
options: Options
15+
options: Partial<Options>
1616
): string => {
1717
if (typeof propValue === 'number') {
1818
return `{${String(propValue)}}`;

‎src/formatter/formatReactElementNode.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import formatProp from './formatProp';
44
import mergeSiblingPlainStringChildrenReducer from './mergeSiblingPlainStringChildrenReducer';
55
import sortPropsByNames from './sortPropsByNames';
66
import createPropFilter from './createPropFilter';
7-
import type { Options } from '../options';
7+
import { defaultOptions, type Options } from '../options';
88
import type { ReactElementTreeNode } from '../tree';
99

1010
const compensateMultilineStringElementIndentation = (
@@ -92,7 +92,7 @@ export default (
9292
node: ReactElementTreeNode,
9393
inline: boolean,
9494
lvl: number,
95-
options: Options
95+
options: Partial<Options>
9696
): string => {
9797
const {
9898
type,
@@ -113,7 +113,7 @@ export default (
113113
maxInlineAttributesLineLength,
114114
showDefaultProps,
115115
sortProps,
116-
tabStop,
116+
tabStop = defaultOptions.tabStop,
117117
} = options;
118118

119119
let out = `<${displayName}`;

‎src/formatter/formatReactFragmentNode.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export default (
3939
node: ReactFragmentTreeNode,
4040
inline: boolean,
4141
lvl: number,
42-
options: Options
42+
options: Partial<Options>
4343
): string => {
4444
const { type, key, childrens } = node;
4545

‎src/formatter/formatTree.spec.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import { describe, it, expect, vitest } from 'vitest';
22
import formatTree from './formatTree';
33
import formatTreeNode from './formatTreeNode';
4+
import { createStringTreeNode } from '../tree';
45

56
vitest.mock('./formatTreeNode');
67

78
describe('formatTree', () => {
89
it('should format the node as a root node', () => {
910
vitest.mocked(formatTreeNode).mockReturnValue('<MockedComponent />');
1011

11-
const tree = {};
12+
const tree = createStringTreeNode('42');
1213
const options = {};
1314

1415
const result = formatTree(tree, options);

‎src/formatter/formatTree.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,5 @@ import formatTreeNode from './formatTreeNode';
22
import type { Options } from '../options';
33
import type { TreeNode } from '../tree';
44

5-
export default (node: TreeNode, options: Options): string =>
5+
export default (node: TreeNode, options: Partial<Options>): string =>
66
formatTreeNode(node, false, 0, options);

‎src/formatter/formatTreeNode.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export default (
3232
node: TreeNode,
3333
inline: boolean,
3434
lvl: number,
35-
options: Options
35+
options: Partial<Options>
3636
): string => {
3737
if (node.type === 'number') {
3838
return String(node.value);

‎src/index.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { ReactElement } from 'react';
22
import formatTree from './formatter/formatTree';
33
import parseReactElement from './parser/parseReactElement';
4-
import type { Options } from './options';
4+
import { defaultOptions, type Options } from './options';
55

66
const reactElementToJsxString = (
77
element: ReactElement<any> | string | number,
@@ -10,7 +10,7 @@ const reactElementToJsxString = (
1010
showDefaultProps = true,
1111
showFunctions = false,
1212
functionValue,
13-
tabStop = 2,
13+
tabStop = defaultOptions.tabStop,
1414
useBooleanShorthandSyntax = true,
1515
useFragmentShortSyntax = true,
1616
sortProps = true,

‎src/options.ts

+10
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,13 @@ export type Options = {
1313
maxInlineAttributesLineLength?: number;
1414
displayName?: (element: ReactElement) => string;
1515
};
16+
17+
export const defaultOptions = {
18+
filterProps: [],
19+
showDefaultProps: true,
20+
showFunctions: false,
21+
tabStop: 2,
22+
useBooleanShorthandSyntax: true,
23+
useFragmentShortSyntax: true,
24+
sortProps: true,
25+
} as const;

‎src/parser/parseReactElement.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ const filterProps = (
117117

118118
const parseReactElement = (
119119
element: ReactElement<any> | string | number,
120-
options: Options
120+
options: Partial<Options>
121121
): TreeNode => {
122122
const { displayName: displayNameFn = getReactElementDisplayName } = options;
123123

0 commit comments

Comments
 (0)