feat(injector): add reconcilePropTypes (#10)

Author: eps1lon

src/generator.ts

@@ -20,6 +20,23 @@ export interface GenerateOptions {
 	 */
 	includeJSDoc?: boolean;
 
+	/**
+	 * Previous source code of the validator for each prop type
+	 */
+	previousPropTypesSource?: Map<string, string>;
+
+	/**
+	 * Given the `prop`, the `previous` source of the validator and the `generated` source:
+	 * What source should be injected? `previous` is `undefined` if the validator
+	 * didn't exist before
+	 * @default Uses `generated` source
+	 */
+	reconcilePropTypes?(
+		proptype: t.PropTypeNode,
+		previous: string | undefined,
+		generated: string
+	): string;
+
 	/**
 	 * Control which PropTypes are included in the final result
 	 * @param proptype The current PropType about to be converted to text
@@ -46,6 +63,8 @@ export function generate(node: t.Node | t.PropTypeNode[], options: GenerateOptio
 		sortProptypes = true,
 		importedName = 'PropTypes',
 		includeJSDoc = true,
+		previousPropTypesSource = new Map<string, string>(),
+		reconcilePropTypes = (_prop: t.PropTypeNode, _previous: string, generated: string) => generated,
 		shouldInclude,
 	} = options;
 
@@ -118,9 +137,13 @@ export function generate(node: t.Node | t.PropTypeNode[], options: GenerateOptio
 			isOptional = true;
 		}
 
-		return `${jsDoc(node)}"${node.name}": ${generate(propType, options)}${
-			isOptional ? '' : '.isRequired'
-		},`;
+		const validatorSource = reconcilePropTypes(
+			node,
+			previousPropTypesSource.get(node.name),
+			`${generate(propType, options)}${isOptional ? '' : '.isRequired'}`
+		);
+
+		return `${jsDoc(node)}"${node.name}": ${validatorSource},`;
 	}
 
 	if (t.isInterfaceNode(node)) {

src/injector.ts

@@ -31,7 +31,7 @@ export type InjectOptions = {
 	 * Options passed to babel.transformSync
 	 */
 	babelOptions?: babel.TransformOptions;
-} & Pick<GenerateOptions, 'sortProptypes' | 'includeJSDoc' | 'comment'>;
+} & Pick<GenerateOptions, 'sortProptypes' | 'includeJSDoc' | 'comment' | 'reconcilePropTypes'>;
 
 /**
  * Injects the PropTypes from `parse` into the provided JavaScript code
@@ -84,8 +84,16 @@ function plugin(
 	options: InjectOptions = {},
 	mapOfPropTypes: Map<string, string>
 ): babel.PluginObj {
-	const { includeUnusedProps = false, removeExistingPropTypes = false, ...otherOptions } = options;
-
+	const {
+		includeUnusedProps = false,
+		reconcilePropTypes = (
+			_prop: t.PropTypeNode,
+			_previous: string | undefined,
+			generated: string
+		) => generated,
+		removeExistingPropTypes = false,
+		...otherOptions
+	} = options;
 	const shouldInclude: Exclude<InjectOptions['shouldInclude'], undefined> = (data) => {
 		if (options.shouldInclude) {
 			const result = options.shouldInclude(data);
@@ -101,11 +109,12 @@ function plugin(
 	let needImport = false;
 	let alreadyImported = false;
 	let originalPropTypesPath: null | babel.NodePath = null;
+	let previousPropTypesSource = new Map<string, string>();
 
 	return {
 		visitor: {
 			Program: {
-				enter(path) {
+				enter(path, state: any) {
 					if (
 						!path.node.body.some((n) => {
 							if (
@@ -131,6 +140,17 @@ function plugin(
 							babelTypes.isIdentifier(node.expression.left.property, { name: 'propTypes' })
 						) {
 							originalPropTypesPath = nodePath;
+
+							if (babelTypes.isObjectExpression(node.expression.right)) {
+								const { code } = state.file;
+
+								node.expression.right.properties.forEach((property) => {
+									if (babelTypes.isObjectProperty(property)) {
+										const validatorSource = code.slice(property.value.start, property.value.end);
+										previousPropTypesSource.set(property.key.name, validatorSource);
+									}
+								});
+							}
 						}
 					});
 				},
@@ -266,6 +286,8 @@ function plugin(
 		const source = generate(props, {
 			...otherOptions,
 			importedName: importName,
+			previousPropTypesSource,
+			reconcilePropTypes,
 			shouldInclude: (prop) => shouldInclude({ component: props, prop, usedProps }),
 		});
 

test/index.test.ts

@@ -55,7 +55,7 @@ for (const testCase of testCases) {
 		let inputSource = null;
 		if (testCase.endsWith('.d.ts')) {
 			try {
-				inputSource = fs.readFileSync(inputJS, { encoding: 'utf8' });
+				inputSource = fs.readFileSync(inputJS, 'utf8');
 			} catch (error) {}
 		} else {
 			inputSource = ttp.ts.transpileModule(fs.readFileSync(testCase, 'utf8'), {

test/reconcile-prop-types/input.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+interface Props {
+	children: React.ReactNode;
+}
+
+export default function Component(props: Props): JSX.Element;

test/reconcile-prop-types/input.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import { chainPropTypes } from 'some-utils-module';
+
+function Component(props) {
+	const { children } = props;
+	return (
+		<button>
+			<span>{children}</span>
+		</button>
+	);
+}
+
+Component.propTypes = {
+	children: chainPropTypes(PropTypes.node.isRequired, (props) => {
+		const summary = React.Children.toArray(props.children)[0];
+		if (isFragment(summary)) {
+			return new Error('Not accepting Fragments');
+		}
+
+		if (!React.isValidElement(summary)) {
+			return new Error('First child must be an element');
+		}
+
+		return null;
+	}),
+};
+
+export default Component;

test/reconcile-prop-types/options.ts

@@ -0,0 +1,17 @@
+import { TestOptions } from '../types';
+
+const options: TestOptions = {
+	injector: {
+		removeExistingPropTypes: true,
+		reconcilePropTypes: (prop, previous: any, generated) => {
+			const isCustomValidator = previous !== undefined && !previous.startsWith('PropTypes');
+
+			if (isCustomValidator) {
+				return previous;
+			}
+			return generated;
+		},
+	},
+};
+
+export default options;

test/reconcile-prop-types/output.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import { chainPropTypes } from 'some-utils-module';
+
+function Component(props) {
+	const { children } = props;
+	return (
+		<button>
+			<span>{children}</span>
+		</button>
+	);
+}
+
+Component.propTypes = {
+	children: chainPropTypes(PropTypes.node.isRequired, (props) => {
+		const summary = React.Children.toArray(props.children)[0];
+		if (isFragment(summary)) {
+			return new Error('Not accepting Fragments');
+		}
+
+		if (!React.isValidElement(summary)) {
+			return new Error('First child must be an element');
+		}
+
+		return null;
+	}),
+};
+
+export default Component;

test/reconcile-prop-types/output.json

@@ -0,0 +1,19 @@
+{
+	"type": "ProgramNode",
+	"body": [
+		{
+			"type": "ComponentNode",
+			"name": "Component",
+			"types": [
+				{
+					"type": "PropTypeNode",
+					"name": "children",
+					"propType": {
+						"type": "UnionNode",
+						"types": [{ "type": "ElementNode", "elementType": "node" }, { "type": "UndefinedNode" }]
+					}
+				}
+			]
+		}
+	]
+}