Solve TS issues

armandabric · armandabric · commit 977b71721bcf · 2025-01-13T22:49:53.000+01:00
diff --git a/src/formatter/formatComplexDataStructure.spec.ts b/src/formatter/formatComplexDataStructure.spec.ts
@@ -1,18 +1,18 @@
-import { describe, it, expect, vitest, beforeAll } from 'vitest';
-import React from 'react';
+import { describe, it, expect, vitest } from 'vitest';
+import React, { NamedExoticComponent } from 'react';
 import formatComplexDataStructure from './formatComplexDataStructure';
-// import formatReactElementNode from './formatReactElementNode';
+import { Options } from '../options';
 
 vitest.mock('./formatReactElementNode', () => ({
-  default: (node) => `<${node.displayName} />`,
+  default: (node: NamedExoticComponent) => `<${node.displayName} />`,
 }));
 
 const createFakeReactElement = (tagName = 'Foo') =>
   React.createElement(tagName, {}, null);
 
 const options = {
   tabStop: 2,
-};
+} as any as Options;
 
 describe('formatComplexDataStructure', () => {
   // FIXME: How to convert the vitest.mock factory into a mock?
diff --git a/src/formatter/formatComplexDataStructure.ts b/src/formatter/formatComplexDataStructure.ts
@@ -5,13 +5,13 @@ import parseReactElement from '../parser/parseReactElement';
 import formatTreeNode from './formatTreeNode';
 import formatFunction from './formatFunction';
 import spacer from './spacer';
-import type { Options } from '../options';
+import { defaultOptions, type Options } from '../options';
 
 export default (
   value: Record<string, unknown> | Array<unknown>,
   inline: boolean,
   lvl: number,
-  options: Options
+  options: Partial<Options>
 ): string => {
   const normalizedValue = sortObject(value);
 
@@ -45,8 +45,10 @@ export default (
       .replace(/ ]/g, ']');
   }
 
+  const tabStop = options.tabStop ?? defaultOptions.tabStop;
+
   // Replace tabs with spaces, and add necessary indentation in front of each new line
   return stringifiedValue
-    .replace(/\t/g, spacer(1, options.tabStop))
-    .replace(/\n([^$])/g, `\n${spacer(lvl + 1, options.tabStop)}$1`);
+    .replace(/\t/g, spacer(1, tabStop))
+    .replace(/\n([^$])/g, `\n${spacer(lvl + 1, tabStop)}$1`);
 };
diff --git a/src/formatter/formatFunction.spec.ts b/src/formatter/formatFunction.spec.ts
@@ -1,9 +1,10 @@
 import { describe, it, expect, vitest } from 'vitest';
 import formatFunction from './formatFunction';
+import { NamedExoticComponent } from 'react';
 
 vitest.mock(
   './formatReactElementNode',
-  () => (node) => `<${node.displayName} />`
+  () => (node: NamedExoticComponent) => `<${node.displayName} />`
 );
 
 function hello() {
diff --git a/src/formatter/formatFunction.ts b/src/formatter/formatFunction.ts
@@ -14,7 +14,7 @@ export const preserveFunctionLineBreak = (fn: Function): string =>
 
 const defaultFunctionValue = inlineFunction;
 
-export default (fn: Function, options: Options): string => {
+export default (fn: Function, options: Partial<Options>): string => {
   const { functionValue = defaultFunctionValue, showFunctions } = options;
 
   if (!showFunctions && functionValue === defaultFunctionValue) {
diff --git a/src/formatter/formatProp.spec.ts b/src/formatter/formatProp.spec.ts
@@ -1,13 +1,14 @@
 import { describe, it, expect, vitest, beforeEach } from 'vitest';
 import formatProp from './formatProp';
 import formatPropValue from './formatPropValue';
+import { Options } from '../options';
 
 vitest.mock('./formatPropValue');
 
 const defaultOptions = {
   useBooleanShorthandSyntax: true,
   tabStop: 2,
-};
+} as any as Options;
 
 describe('formatProp', () => {
   beforeEach(() => {
@@ -16,7 +17,7 @@ describe('formatProp', () => {
   });
 
   it('should format prop with only a value', () => {
-    formatPropValue.mockReturnValue('"MockedPropValue"');
+    vitest.mocked(formatPropValue).mockReturnValue('"MockedPropValue"');
 
     expect(
       formatProp('foo', true, 'bar', false, null, true, 0, defaultOptions)
@@ -36,7 +37,7 @@ describe('formatProp', () => {
   });
 
   it('should format prop with only a default value', () => {
-    formatPropValue.mockReturnValue('"MockedPropValue"');
+    vitest.mocked(formatPropValue).mockReturnValue('"MockedPropValue"');
 
     expect(
       formatProp('foo', false, null, true, 'baz', true, 0, defaultOptions)
@@ -56,7 +57,7 @@ describe('formatProp', () => {
   });
 
   it('should format prop with a value and a default value', () => {
-    formatPropValue.mockReturnValue('"MockedPropValue"');
+    vitest.mocked(formatPropValue).mockReturnValue('"MockedPropValue"');
 
     expect(
       formatProp('foo', true, 'bar', true, 'baz', true, 0, defaultOptions)
@@ -79,9 +80,9 @@ describe('formatProp', () => {
     const options = {
       useBooleanShorthandSyntax: true,
       tabStop: 2,
-    };
+    } as Options;
 
-    formatPropValue.mockReturnValue('{true}');
+    vitest.mocked(formatPropValue).mockReturnValue('{true}');
 
     expect(
       formatProp('foo', true, true, false, false, true, 0, options)
@@ -99,9 +100,9 @@ describe('formatProp', () => {
     const options = {
       useBooleanShorthandSyntax: true,
       tabStop: 2,
-    };
+    } as Options;
 
-    formatPropValue.mockReturnValue('{false}');
+    vitest.mocked(formatPropValue).mockReturnValue('{false}');
 
     expect(
       formatProp('foo', true, false, false, null, true, 0, options)
@@ -118,9 +119,9 @@ describe('formatProp', () => {
     const options = {
       useBooleanShorthandSyntax: false,
       tabStop: 2,
-    };
+    } as Options;
 
-    formatPropValue.mockReturnValue('{true}');
+    vitest.mocked(formatPropValue).mockReturnValue('{true}');
 
     expect(
       formatProp('foo', true, true, false, false, true, 0, options)
@@ -138,9 +139,9 @@ describe('formatProp', () => {
     const options = {
       useBooleanShorthandSyntax: false,
       tabStop: 2,
-    };
+    } as Options;
 
-    formatPropValue.mockReturnValue('{false}');
+    vitest.mocked(formatPropValue).mockReturnValue('{false}');
 
     expect(
       formatProp('foo', true, false, false, false, true, 0, options)
@@ -155,7 +156,7 @@ describe('formatProp', () => {
   });
 
   it('should format a mulitline props', () => {
-    formatPropValue.mockReturnValue(`{[
+    vitest.mocked(formatPropValue).mockReturnValue(`{[
 "a",
 "b"
 ]}`);
@@ -202,9 +203,9 @@ describe('formatProp', () => {
     const options = {
       useBooleanShorthandSyntax: true,
       tabStop: 2,
-    };
+    } as Options;
 
-    formatPropValue.mockReturnValue('"MockedPropValue"');
+    vitest.mocked(formatPropValue).mockReturnValue('"MockedPropValue"');
 
     expect(
       formatProp('foo', true, 'bar', false, null, true, 4, options)
diff --git a/src/formatter/formatProp.ts b/src/formatter/formatProp.ts
@@ -1,6 +1,6 @@
 import spacer from './spacer';
 import formatPropValue from './formatPropValue';
-import type { Options } from '../options';
+import { defaultOptions, type Options } from '../options';
 
 export default (
   name: string,
@@ -10,7 +10,7 @@ export default (
   defaultValue: unknown,
   inline: boolean,
   lvl: number,
-  options: Options
+  options: Partial<Options>
 ): {
   attributeFormattedInline: string;
   attributeFormattedMultiline: string;
@@ -24,7 +24,8 @@ export default (
 
   const usedValue = hasValue ? value : defaultValue;
 
-  const { useBooleanShorthandSyntax, tabStop } = options;
+  const { useBooleanShorthandSyntax, tabStop = defaultOptions.tabStop } =
+    options;
 
   const formattedPropValue = formatPropValue(usedValue, inline, lvl, options);
 
diff --git a/src/formatter/formatPropValue.ts b/src/formatter/formatPropValue.ts
@@ -12,7 +12,7 @@ const formatPropValue = (
   propValue: unknown,
   inline: boolean,
   lvl: number,
-  options: Options
+  options: Partial<Options>
 ): string => {
   if (typeof propValue === 'number') {
     return `{${String(propValue)}}`;
diff --git a/src/formatter/formatReactElementNode.ts b/src/formatter/formatReactElementNode.ts
@@ -4,7 +4,7 @@ import formatProp from './formatProp';
 import mergeSiblingPlainStringChildrenReducer from './mergeSiblingPlainStringChildrenReducer';
 import sortPropsByNames from './sortPropsByNames';
 import createPropFilter from './createPropFilter';
-import type { Options } from '../options';
+import { defaultOptions, type Options } from '../options';
 import type { ReactElementTreeNode } from '../tree';
 
 const compensateMultilineStringElementIndentation = (
@@ -92,7 +92,7 @@ export default (
   node: ReactElementTreeNode,
   inline: boolean,
   lvl: number,
-  options: Options
+  options: Partial<Options>
 ): string => {
   const {
     type,
@@ -113,7 +113,7 @@ export default (
     maxInlineAttributesLineLength,
     showDefaultProps,
     sortProps,
-    tabStop,
+    tabStop = defaultOptions.tabStop,
   } = options;
 
   let out = `<${displayName}`;
diff --git a/src/formatter/formatReactFragmentNode.ts b/src/formatter/formatReactFragmentNode.ts
@@ -39,7 +39,7 @@ export default (
   node: ReactFragmentTreeNode,
   inline: boolean,
   lvl: number,
-  options: Options
+  options: Partial<Options>
 ): string => {
   const { type, key, childrens } = node;
 
diff --git a/src/formatter/formatTree.spec.ts b/src/formatter/formatTree.spec.ts
@@ -1,14 +1,15 @@
 import { describe, it, expect, vitest } from 'vitest';
 import formatTree from './formatTree';
 import formatTreeNode from './formatTreeNode';
+import { createStringTreeNode } from '../tree';
 
 vitest.mock('./formatTreeNode');
 
 describe('formatTree', () => {
   it('should format the node as a root node', () => {
     vitest.mocked(formatTreeNode).mockReturnValue('<MockedComponent />');
 
-    const tree = {};
+    const tree = createStringTreeNode('42');
     const options = {};
 
     const result = formatTree(tree, options);
diff --git a/src/formatter/formatTree.ts b/src/formatter/formatTree.ts
@@ -2,5 +2,5 @@ import formatTreeNode from './formatTreeNode';
 import type { Options } from '../options';
 import type { TreeNode } from '../tree';
 
-export default (node: TreeNode, options: Options): string =>
+export default (node: TreeNode, options: Partial<Options>): string =>
   formatTreeNode(node, false, 0, options);
diff --git a/src/formatter/formatTreeNode.ts b/src/formatter/formatTreeNode.ts
@@ -32,7 +32,7 @@ export default (
   node: TreeNode,
   inline: boolean,
   lvl: number,
-  options: Options
+  options: Partial<Options>
 ): string => {
   if (node.type === 'number') {
     return String(node.value);
diff --git a/src/index.ts b/src/index.ts
@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react';
 import formatTree from './formatter/formatTree';
 import parseReactElement from './parser/parseReactElement';
-import type { Options } from './options';
+import { defaultOptions, type Options } from './options';
 
 const reactElementToJsxString = (
   element: ReactElement<any> | string | number,
@@ -10,7 +10,7 @@ const reactElementToJsxString = (
     showDefaultProps = true,
     showFunctions = false,
     functionValue,
-    tabStop = 2,
+    tabStop = defaultOptions.tabStop,
     useBooleanShorthandSyntax = true,
     useFragmentShortSyntax = true,
     sortProps = true,
diff --git a/src/options.ts b/src/options.ts
@@ -13,3 +13,13 @@ export type Options = {
   maxInlineAttributesLineLength?: number;
   displayName?: (element: ReactElement) => string;
 };
+
+export const defaultOptions = {
+  filterProps: [],
+  showDefaultProps: true,
+  showFunctions: false,
+  tabStop: 2,
+  useBooleanShorthandSyntax: true,
+  useFragmentShortSyntax: true,
+  sortProps: true,
+} as const;
diff --git a/src/parser/parseReactElement.ts b/src/parser/parseReactElement.ts
@@ -117,7 +117,7 @@ const filterProps = (
 
 const parseReactElement = (
   element: ReactElement<any> | string | number,
-  options: Options
+  options: Partial<Options>
 ): TreeNode => {
   const { displayName: displayNameFn = getReactElementDisplayName } = options;
 
