@eslint-react/jsx 5.8.6 → 5.8.7-beta.1

package/dist/index.d.ts

@@ -215,10 +215,18 @@ declare function getAttributeValue(context: RuleContext, element: TSESTree.JSXEl
 /**
  * Get the **meaningful** children of a JSX element or fragment.
  *
- * Filters out "padding spaces" — `JSXText` nodes that consist entirely of
- * whitespace and contain at least one newline.  These nodes are artefacts of
- * source formatting that React trims away during rendering and are therefore
- * not considered meaningful content.
+ * 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. 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 `""`. React's reconciler and SSR renderer
+ *    explicitly skip empty strings, producing no DOM node
+ *    (see ReactChildFiber.js and ReactFizzConfigDOM.js).
  *
  * @param element - A `JSXElement` or `JSXFragment` node.
  * @returns An array of children nodes that contribute to rendered output.
@@ -320,12 +328,17 @@ declare function hasAttribute(context: RuleContext, element: TSESTree.JSXElement
 //#region src/has-children.d.ts
 /**
  * Check whether a JSX element (or fragment) has **meaningful** children —
- * that is, at least one child that is not purely whitespace text.
+ * that is, at least one child that is not purely whitespace text or an empty
+ * string expression.
+ *
+ * A `JSXText` child whose `raw` content is empty after trimming is considered
+ * non-meaningful because it is typically a code-formatting artefact
+ * (indentation between tags). While React's client renderer preserves these
+ * nodes as text nodes, they rarely represent intentionally rendered content.
  *
- * A `JSXText` child whose `raw` content is empty after trimming is
- * considered non-meaningful regardless of whether it contains a line break.
- * This matches React's rendering behaviour where whitespace-only text nodes
- * do not produce visible output.
+ * An empty string expression (`children={""}`) is also considered
+ * non-meaningful because React's reconciler and SSR renderer explicitly skip
+ * empty strings, producing no DOM node.
  *
  * @param element - A `JSXElement` or `JSXFragment` node.
  * @returns `true` when the element has at least one meaningful child.
@@ -340,6 +353,7 @@ declare function hasAttribute(context: RuleContext, element: TSESTree.JSXElement
  * // <div>                      -> false  (whitespace-only, with newlines)
  * // </div>
  * // <div></div>                -> false  (no children at all)
+ * // <div>{""}</div>            -> false  (empty string expression)
  *
  * if (hasChildren(node)) {
  *   // element renders visible content

package/dist/index.js

@@ -297,10 +297,18 @@ function getAttributeValue(context, element, name) {
 /**
 * Get the **meaningful** children of a JSX element or fragment.
 *
-* Filters out "padding spaces" — `JSXText` nodes that consist entirely of
-* whitespace and contain at least one newline.  These nodes are artefacts of
-* source formatting that React trims away during rendering and are therefore
-* not considered meaningful content.
+* 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. 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 `""`. React's reconciler and SSR renderer
+*    explicitly skip empty strings, producing no DOM node
+*    (see ReactChildFiber.js and ReactFizzConfigDOM.js).
 *
 * @param element - A `JSXElement` or `JSXFragment` node.
 * @returns An array of children nodes that contribute to rendered output.
@@ -320,14 +328,19 @@ function getAttributeValue(context, element, name) {
 * ```
 */
 function getChildren(element) {
-	return element.children.filter((child) => !isPaddingSpaces(child));
+	return element.children.filter((child) => {
+		if (isPaddingSpaces(child)) return false;
+		if (isEmptyStringExpression$1(child)) return false;
+		return true;
+	});
 }
 /**
 * A `JSXText` node is considered **padding spaces** when it is purely
 * whitespace *and* contains at least one newline character.
 *
-* These nodes are formatting artefacts (indentation between JSX tags) that
-* React discards at render time.
+* These nodes are code-formatting artefacts (indentation between JSX tags).
+* While React's client renderer preserves them as text nodes, browser HTML
+* parsers may discard them during hydration, leading to hydration mismatches.
 *
 * @param node The JSX child node to check.
 * @internal
@@ -336,6 +349,24 @@ function isPaddingSpaces(node) {
 	if (node.type !== AST_NODE_TYPES.JSXText) return false;
 	return node.raw.trim() === "" && node.raw.includes("\n");
 }
+/**
+* A `JSXExpressionContainer` node is considered an empty string expression
+* when it wraps a string literal with value `""`.
+*
+* React's reconciler explicitly ignores empty strings
+* (`typeof newChild === 'string' && newChild !== ''` in ReactChildFiber.js),
+* and the SSR renderer skips them as well (`if (text === '') { return; }`
+* in ReactFizzConfigDOM.js). They produce no DOM node.
+*
+* @param node The JSX child node to check.
+* @internal
+*/
+function isEmptyStringExpression$1(node) {
+	if (node.type !== AST_NODE_TYPES.JSXExpressionContainer) return false;
+	const expr = node.expression;
+	if (expr.type !== AST_NODE_TYPES.Literal) return false;
+	return expr.value === "";
+}
 
 //#endregion
 //#region src/get-element-type.ts
@@ -436,12 +467,17 @@ function hasAttribute(context, element, name) {
 //#region src/has-children.ts
 /**
 * Check whether a JSX element (or fragment) has **meaningful** children —
-* that is, at least one child that is not purely whitespace text.
+* that is, at least one child that is not purely whitespace text or an empty
+* string expression.
+*
+* A `JSXText` child whose `raw` content is empty after trimming is considered
+* non-meaningful because it is typically a code-formatting artefact
+* (indentation between tags). While React's client renderer preserves these
+* nodes as text nodes, they rarely represent intentionally rendered content.
 *
-* A `JSXText` child whose `raw` content is empty after trimming is
-* considered non-meaningful regardless of whether it contains a line break.
-* This matches React's rendering behaviour where whitespace-only text nodes
-* do not produce visible output.
+* An empty string expression (`children={""}`) is also considered
+* non-meaningful because React's reconciler and SSR renderer explicitly skip
+* empty strings, producing no DOM node.
 *
 * @param element - A `JSXElement` or `JSXFragment` node.
 * @returns `true` when the element has at least one meaningful child.
@@ -456,6 +492,7 @@ function hasAttribute(context, element, name) {
 * // <div>                      -> false  (whitespace-only, with newlines)
 * // </div>
 * // <div></div>                -> false  (no children at all)
+* // <div>{""}</div>            -> false  (empty string expression)
 *
 * if (hasChildren(node)) {
 *   // element renders visible content
@@ -464,7 +501,7 @@ function hasAttribute(context, element, name) {
 */
 function hasChildren(element) {
 	if (element.children.length === 0) return false;
-	return !element.children.every((child) => isWhitespaceText$1(child));
+	return !element.children.every((child) => isWhitespaceText$1(child) || isEmptyStringExpression(child));
 }
 /**
 * Whether a JSX child node is a whitespace-only `JSXText` node.
@@ -478,6 +515,20 @@ function isWhitespaceText$1(node) {
 	if (node.type !== AST_NODE_TYPES.JSXText) return false;
 	return node.raw.trim() === "";
 }
+/**
+* Whether a JSX child node is an empty string expression (`{""}`).
+*
+* React's reconciler and SSR renderer skip empty strings, producing no DOM
+* node. These expressions are therefore considered non-meaningful children.
+*
+* @param node The JSX child node to check.
+*/
+function isEmptyStringExpression(node) {
+	if (node.type !== AST_NODE_TYPES.JSXExpressionContainer) return false;
+	const expr = node.expression;
+	if (expr.type !== AST_NODE_TYPES.Literal) return false;
+	return expr.value === "";
+}
 
 //#endregion
 //#region src/has-every-attribute.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eslint-react/jsx",
-  "version": "5.8.6",
+  "version": "5.8.7-beta.1",
   "description": "ESLint React's TSESTree JSX utility module for static analysis of JSX patterns.",
   "homepage": "https://github.com/Rel1cx/eslint-react",
   "bugs": {
@@ -32,17 +32,17 @@
     "@typescript-eslint/types": "^8.60.0",
     "@typescript-eslint/utils": "^8.60.0",
     "ts-pattern": "^5.9.0",
-    "@eslint-react/ast": "5.8.6",
-    "@eslint-react/eslint": "5.8.6",
-    "@eslint-react/var": "5.8.6",
-    "@eslint-react/shared": "5.8.6"
+    "@eslint-react/ast": "5.8.7-beta.1",
+    "@eslint-react/eslint": "5.8.7-beta.1",
+    "@eslint-react/shared": "5.8.7-beta.1",
+    "@eslint-react/var": "5.8.7-beta.1"
   },
   "devDependencies": {
     "eslint": "^10.4.0",
     "tsdown": "^0.22.0",
     "typescript": "5.9.3",
-    "@local/eff": "3.0.0-beta.72",
-    "@local/configs": "0.0.0"
+    "@local/configs": "0.0.0",
+    "@local/eff": "3.0.0-beta.72"
   },
   "peerDependencies": {
     "eslint": "^10.3.0",