@eslint-react/jsx 5.8.11 → 5.8.12

package/dist/index.d.ts

@@ -2,6 +2,24 @@ import { TSESTreeJSXAttributeLike, TSESTreeJSXElementLike } from "@eslint-react/
 import { TSESTree } from "@typescript-eslint/types";
 import { RuleContext } from "@eslint-react/eslint";
 
+//#region src/collapse-multiline-text.d.ts
+/**
+ * Collapse a multiline JSX text string following React's whitespace rules.
+ *
+ * This mirrors Babel's `cleanJSXElementLiteralChild` algorithm:
+ * 1. Split the raw text into lines.
+ * 2. Find the last non-empty line.
+ * 3. Trim leading spaces on non-first lines and trailing spaces on non-last lines.
+ * 4. Collapse tabs into spaces.
+ * 5. Append a single space after each non-last non-empty line.
+ *
+ * @param text - The raw JSX text string to collapse.
+ * @returns The collapsed string, or `null` if the text contains only whitespace.
+ *
+ * @see https://github.com/babel/babel/blob/main/packages/babel-types/src/utils/react/cleanJSXElementLiteralChild.ts
+ */
+declare function collapseMultilineText(text: string): string | null;
+//#endregion
 //#region src/find-attribute.d.ts
 /**
  * Find a JSX attribute (or spread attribute containing the property) by name
@@ -215,24 +233,12 @@ declare function getAttributeValue(context: RuleContext, element: TSESTree.JSXEl
 /**
  * Get the **meaningful** children of a JSX element or fragment.
  *
- * Filters out nodes that React will not render into the DOM:
- *
- * 1. "Padding spaces" — `JSXText` nodes that consist entirely of whitespace
- *    and contain at least one newline (see {@link isWhitespace}). These are
- *    code-formatting artefacts (indentation between tags). While React's client
- *    renderer preserves them as text nodes, browser HTML parsers may discard
- *    them during hydration, causing hydration mismatches.
- *
- * 2. Empty string expressions — `JSXExpressionContainer` nodes whose expression
- *    is a string literal with value `""` (see {@link isEmptyStringExpression}).
- *    React's reconciler and SSR renderer explicitly skip empty strings,
- *    producing no DOM node.
- *
- * Whitespace-only text **without** a newline (e.g. the single space in
- * `<div> </div>`) is intentionally **kept**, because React renders it. For
- * this reason `getChildren(node).length > 0` is **not** equivalent to
- * {@link hasChildren}, which applies a stricter "any whitespace-only text is
- * non-meaningful" heuristic. Pick the one that matches your rule's intent.
+ * Mirrors Babel's `buildChildren` helper:
+ * 1. Iterate over `element.children`.
+ * 2. Skip `JSXText` nodes that clean to nothing (padding whitespace).
+ * 3. Skip `JSXExpressionContainer` nodes whose expression is empty.
+ * 4. Skip `JSXEmptyExpression` nodes.
+ * 5. Collect everything else.
  *
  * @param element - A `JSXElement` or `JSXFragment` node.
  * @returns An array of children nodes that contribute to rendered output.
@@ -505,8 +511,10 @@ declare function isHostElement(node: TSESTree.Node): node is TSESTree.JSXElement
  * trim away during rendering.
  *
  * A child is considered whitespace padding when it is a `JSXText` node whose
- * raw content is empty after trimming **and** contains at least one newline.
- * This is the whitespace that appears between JSX tags purely for formatting:
+ * content is empty after applying React's whitespace normalization
+ * (see {@link collapseMultilineText}, modelled after Babel's
+ * `cleanJSXElementLiteralChild`). This is the whitespace that appears between
+ * JSX tags purely for formatting:
  *
  * ```jsx
  * <div>
@@ -515,20 +523,8 @@ declare function isHostElement(node: TSESTree.Node): node is TSESTree.JSXElement
  * </div>
  * ```
  *
- * Use {@link isWhitespaceText} for a looser check that also matches
- * whitespace‑only text that does **not** contain a newline.
- *
  * @param node - A JSX child node.
  * @returns `true` when the node is purely formatting whitespace.
- *
- * @example
- * ```ts
- * import { isWhitespace } from "@eslint-react/jsx";
- *
- * const meaningful = element.children.filter(
- *   (child) => !isWhitespace(child),
- * );
- * ```
  */
 declare function isWhitespace(node: TSESTree.JSXChild): boolean;
 /**
@@ -632,4 +628,4 @@ declare const DEFAULT_JSX_DETECTION_HINT: JsxDetectionHint;
  */
 declare function resolveAttributeValue(context: RuleContext, attribute: TSESTreeJSXAttributeLike): JsxAttributeValue;
 //#endregion
-export { DEFAULT_JSX_DETECTION_HINT, ElementTest, JsxAttributeValue, JsxDetectionHint, findAttribute, findParentAttribute, getAttributeName, getAttributeStaticValue, getAttributeValue, getChildren, getElementFullType, getElementSelfType, hasAnyAttribute, hasAttribute, hasChildren, hasEveryAttribute, isElement, isEmptyStringExpression, isFragmentElement, isHostElement, isWhitespace, isWhitespaceText, resolveAttributeValue };
+export { DEFAULT_JSX_DETECTION_HINT, ElementTest, JsxAttributeValue, JsxDetectionHint, collapseMultilineText, findAttribute, findParentAttribute, getAttributeName, getAttributeStaticValue, getAttributeValue, getChildren, getElementFullType, getElementSelfType, hasAnyAttribute, hasAttribute, hasChildren, hasEveryAttribute, isElement, isEmptyStringExpression, isFragmentElement, isHostElement, isWhitespace, isWhitespaceText, resolveAttributeValue };

package/dist/index.js

@@ -4,6 +4,44 @@ import { AST_NODE_TYPES } from "@typescript-eslint/types";
 import { getStaticValue } from "@typescript-eslint/utils/ast-utils";
 import { P, match } from "ts-pattern";
 
+//#region src/collapse-multiline-text.ts
+/**
+* Collapse a multiline JSX text string following React's whitespace rules.
+*
+* This mirrors Babel's `cleanJSXElementLiteralChild` algorithm:
+* 1. Split the raw text into lines.
+* 2. Find the last non-empty line.
+* 3. Trim leading spaces on non-first lines and trailing spaces on non-last lines.
+* 4. Collapse tabs into spaces.
+* 5. Append a single space after each non-last non-empty line.
+*
+* @param text - The raw JSX text string to collapse.
+* @returns The collapsed string, or `null` if the text contains only whitespace.
+*
+* @see https://github.com/babel/babel/blob/main/packages/babel-types/src/utils/react/cleanJSXElementLiteralChild.ts
+*/
+function collapseMultilineText(text) {
+	const lines = text.split(/\r\n|\n|\r/);
+	let lastNonEmptyLine = 0;
+	for (let i = 0; i < lines.length; i++) if (/[^ \t]/.exec(lines[i]) != null) lastNonEmptyLine = i;
+	let str = "";
+	for (let i = 0; i < lines.length; i++) {
+		const line = lines[i];
+		const isFirstLine = i === 0;
+		const isLastLine = i === lines.length - 1;
+		const isLastNonEmptyLine = i === lastNonEmptyLine;
+		let trimmedLine = line.replace(/\t/g, " ");
+		if (!isFirstLine) trimmedLine = trimmedLine.replace(/^ +/, "");
+		if (!isLastLine) trimmedLine = trimmedLine.replace(/ +$/, "");
+		if (trimmedLine.length > 0) {
+			if (!isLastNonEmptyLine) trimmedLine += " ";
+			str += trimmedLine;
+		}
+	}
+	return str || null;
+}
+
+//#endregion
 //#region src/get-attribute-name.ts
 /**
 * Get the stringified name of a `JSXAttribute` node.
@@ -299,8 +337,10 @@ function getAttributeValue(context, element, name) {
 * trim away during rendering.
 *
 * A child is considered whitespace padding when it is a `JSXText` node whose
-* raw content is empty after trimming **and** contains at least one newline.
-* This is the whitespace that appears between JSX tags purely for formatting:
+* content is empty after applying React's whitespace normalization
+* (see {@link collapseMultilineText}, modelled after Babel's
+* `cleanJSXElementLiteralChild`). This is the whitespace that appears between
+* JSX tags purely for formatting:
 *
 * ```jsx
 * <div>
@@ -309,24 +349,12 @@ function getAttributeValue(context, element, name) {
 * </div>
 * ```
 *
-* Use {@link isWhitespaceText} for a looser check that also matches
-* whitespace‑only text that does **not** contain a newline.
-*
 * @param node - A JSX child node.
 * @returns `true` when the node is purely formatting whitespace.
-*
-* @example
-* ```ts
-* import { isWhitespace } from "@eslint-react/jsx";
-*
-* const meaningful = element.children.filter(
-*   (child) => !isWhitespace(child),
-* );
-* ```
 */
 function isWhitespace(node) {
 	if (node.type !== AST_NODE_TYPES.JSXText) return false;
-	return node.raw.trim() === "" && node.raw.includes("\n");
+	return collapseMultilineText(node.value) == null && node.value.includes("\n");
 }
 /**
 * Check whether a JSX child node is **any** whitespace‑only text.
@@ -375,24 +403,12 @@ function isEmptyStringExpression(node) {
 /**
 * Get the **meaningful** children of a JSX element or fragment.
 *
-* Filters out nodes that React will not render into the DOM:
-*
-* 1. "Padding spaces" — `JSXText` nodes that consist entirely of whitespace
-*    and contain at least one newline (see {@link isWhitespace}). These are
-*    code-formatting artefacts (indentation between tags). While React's client
-*    renderer preserves them as text nodes, browser HTML parsers may discard
-*    them during hydration, causing hydration mismatches.
-*
-* 2. Empty string expressions — `JSXExpressionContainer` nodes whose expression
-*    is a string literal with value `""` (see {@link isEmptyStringExpression}).
-*    React's reconciler and SSR renderer explicitly skip empty strings,
-*    producing no DOM node.
-*
-* Whitespace-only text **without** a newline (e.g. the single space in
-* `<div> </div>`) is intentionally **kept**, because React renders it. For
-* this reason `getChildren(node).length > 0` is **not** equivalent to
-* {@link hasChildren}, which applies a stricter "any whitespace-only text is
-* non-meaningful" heuristic. Pick the one that matches your rule's intent.
+* Mirrors Babel's `buildChildren` helper:
+* 1. Iterate over `element.children`.
+* 2. Skip `JSXText` nodes that clean to nothing (padding whitespace).
+* 3. Skip `JSXExpressionContainer` nodes whose expression is empty.
+* 4. Skip `JSXEmptyExpression` nodes.
+* 5. Collect everything else.
 *
 * @param element - A `JSXElement` or `JSXFragment` node.
 * @returns An array of children nodes that contribute to rendered output.
@@ -412,11 +428,23 @@ function isEmptyStringExpression(node) {
 * ```
 */
 function getChildren(element) {
-	return element.children.filter((child) => {
-		if (isWhitespace(child)) return false;
-		if (isEmptyStringExpression(child)) return false;
-		return true;
-	});
+	const elements = [];
+	for (const child of element.children) {
+		if (child.type === AST_NODE_TYPES.JSXText) {
+			if (collapseMultilineText(child.value) == null && child.value.includes("\n")) continue;
+			elements.push(child);
+			continue;
+		}
+		if (child.type === AST_NODE_TYPES.JSXExpressionContainer) {
+			const { expression } = child;
+			if (expression.type === AST_NODE_TYPES.JSXEmptyExpression) continue;
+			if (isEmptyStringExpression(child)) continue;
+			elements.push(child);
+			continue;
+		}
+		elements.push(child);
+	}
+	return elements;
 }
 
 //#endregion
@@ -723,4 +751,4 @@ const JsxDetectionHint = {
 const DEFAULT_JSX_DETECTION_HINT = 0n | JsxDetectionHint.DoNotIncludeJsxWithNumberValue | JsxDetectionHint.DoNotIncludeJsxWithBigIntValue | JsxDetectionHint.DoNotIncludeJsxWithBooleanValue | JsxDetectionHint.DoNotIncludeJsxWithStringValue | JsxDetectionHint.DoNotIncludeJsxWithUndefinedValue;
 
 //#endregion
-export { DEFAULT_JSX_DETECTION_HINT, JsxDetectionHint, findAttribute, findParentAttribute, getAttributeName, getAttributeStaticValue, getAttributeValue, getChildren, getElementFullType, getElementSelfType, hasAnyAttribute, hasAttribute, hasChildren, hasEveryAttribute, isElement, isEmptyStringExpression, isFragmentElement, isHostElement, isWhitespace, isWhitespaceText, resolveAttributeValue };
+export { DEFAULT_JSX_DETECTION_HINT, JsxDetectionHint, collapseMultilineText, findAttribute, findParentAttribute, getAttributeName, getAttributeStaticValue, getAttributeValue, getChildren, getElementFullType, getElementSelfType, hasAnyAttribute, hasAttribute, hasChildren, hasEveryAttribute, isElement, isEmptyStringExpression, isFragmentElement, isHostElement, isWhitespace, isWhitespaceText, resolveAttributeValue };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eslint-react/jsx",
-  "version": "5.8.11",
+  "version": "5.8.12",
   "description": "ESLint React's TSESTree JSX utility module for static analysis of JSX patterns.",
   "homepage": "https://github.com/Rel1cx/eslint-react",
   "bugs": {
@@ -32,10 +32,10 @@
     "@typescript-eslint/types": "^8.60.1",
     "@typescript-eslint/utils": "^8.60.1",
     "ts-pattern": "^5.9.0",
-    "@eslint-react/ast": "5.8.11",
-    "@eslint-react/eslint": "5.8.11",
-    "@eslint-react/shared": "5.8.11",
-    "@eslint-react/var": "5.8.11"
+    "@eslint-react/ast": "5.8.12",
+    "@eslint-react/shared": "5.8.12",
+    "@eslint-react/var": "5.8.12",
+    "@eslint-react/eslint": "5.8.12"
   },
   "devDependencies": {
     "eslint": "^10.4.1",