feat(tsl-rules-of-react): add noImplicitKey rule for spread attributes

Adds a new rule that detects when spread props implicitly pass a 'key'
prop to JSX elements, which can lead to unintended reconciliation
behavior. Also adds react/preact dev dependencies for type checking
and updates tsl-dx to use the published version.

Author: Rel1cx

.pkgs/configs/package.json

@@ -17,6 +17,6 @@
     "@tsconfig/node24": "^24.0.4",
     "@tsconfig/strictest": "^2.0.8",
     "tsl": "^1.0.29",
-    "tsl-dx": "workspace:*"
+    "tsl-dx": "^0.7.0"
   }
 }

packages/tsl-rules-of-react/package.json

@@ -34,9 +34,15 @@
   "devDependencies": {
     "@local/configs": "workspace:*",
     "@local/eff": "workspace:*",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
     "dedent": "^1.7.1",
+    "preact": "^10.28.3",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "tsdown": "^0.20.3",
     "tsl": "^1.0.29",
+    "tsl-shared": "workspace:*",
     "vitest": "^4.0.18"
   },
   "peerDependencies": {

packages/tsl-rules-of-react/src/rules/rules-of-jsx.test.ts

@@ -10,6 +10,47 @@ test("rules-of-jsx", () => {
     tsx: true,
     ruleFn: rulesOfJsx,
     invalid: [
+      {
+        code: tsx`
+          function Component({ data }: { data: { key: string; name: string } }) {
+            return <div {...data} />;
+          }
+        `,
+        compilerOptions: {
+          jsx: ts.JsxEmit.ReactJSX,
+        },
+        errors: [
+          { message: messages.noImplicitKey },
+        ],
+      },
+      {
+        code: tsx`
+          interface Props { key: string; value: number }
+          function Component({ props }: { props: Props }) {
+            return <div {...props} />;
+          }
+        `,
+        compilerOptions: {
+          jsx: ts.JsxEmit.ReactJSX,
+        },
+        errors: [
+          { message: messages.noImplicitKey },
+        ],
+      },
+      {
+        code: tsx`
+          function Component({ item }: { item: { key: number; id: string } }) {
+            return <div {...item} {...item} />;
+          }
+        `,
+        compilerOptions: {
+          jsx: ts.JsxEmit.ReactJSX,
+        },
+        errors: [
+          { message: messages.noImplicitKey },
+          { message: messages.noImplicitKey },
+        ],
+      },
       {
         code: tsx`
           function Component({ props }) {
@@ -145,6 +186,38 @@ test("rules-of-jsx", () => {
           jsx: ts.JsxEmit.ReactNative,
         },
       },
+      {
+        code: tsx`
+          import React from "react";
+          function Component({ attrs }: { attrs: React.Attributes }) {
+            return <div {...attrs} />;
+          }
+        `,
+        compilerOptions: {
+          jsx: ts.JsxEmit.ReactJSX,
+        },
+      },
+      {
+        code: tsx`
+          function Component({ data }: { data: { id: string; name: string } }) {
+            return <div {...data} />;
+          }
+        `,
+        compilerOptions: {
+          jsx: ts.JsxEmit.ReactJSX,
+        },
+      },
+      {
+        code: tsx`
+          interface Props { id: number; value: string }
+          function Component({ props }: { props: Props }) {
+            return <div {...props} />;
+          }
+        `,
+        compilerOptions: {
+          jsx: ts.JsxEmit.ReactJSX,
+        },
+      },
     ],
   });
   expect(ret).toBe(false);

packages/tsl-rules-of-react/src/rules/rules-of-jsx.ts

@@ -1,11 +1,11 @@
 import { type AST, defineRule } from "tsl";
+import { getFullyQualifiedNameEx } from "tsl-shared";
 import ts from "typescript";
 
 export const messages = {
-  /**
-   * Enforces 'key' prop placement before spread props.
-   */
   keyMustBeforeSpread: "The 'key' prop must be placed before any spread props when using the new JSX transform.",
+  noImplicitKey:
+    "This spread attribute implicitly passes a 'key' prop to the component, which can lead to unintended consequences if the passed key is not intended for React's reconciliation process. Consider explicitly defining the 'key' prop with 'key={value}' if you intend to pass a key.",
   /**
    * @todo: Add the rest of messages
    */
@@ -30,6 +30,17 @@ export const rulesOfJsx = defineRule(() => {
     },
     visitor: {
       JsxSpreadAttribute(ctx, node) {
+        const types = ctx.utils.unionConstituents(ctx.utils.getConstrainedTypeAtLocation(node.expression));
+        for (const type of types) {
+          const key = type.getProperty("key");
+          if (key == null) continue;
+          const fqn = getFullyQualifiedNameEx(ctx.checker, key);
+          if (fqn.toLowerCase().trim().endsWith("react.attributes.key")) continue;
+          ctx.report({
+            node,
+            message: messages.noImplicitKey,
+          });
+        }
         if (!ctx.data.isNewJsxTransform) return;
         const element = node.parent.parent;
         if (element.kind !== ts.SyntaxKind.JsxOpeningElement && element.kind !== ts.SyntaxKind.JsxSelfClosingElement) {