add eslint compatibility

Author: microdev1

README.md

@@ -202,3 +202,54 @@ function TestComponent(_props) {
 ```bash
 bun test
 ```
+
+## ESLint Integration
+
+Since `eslint-plugin-solid`'s `solid/reactivity` rule doesn't know about this plugin, it will flag destructured props as non-reactive. The bundled ESLint processor fixes this by teaching the rule about destructured props.
+
+### Setup
+
+Install `eslint-plugin-solid`:
+
+```bash
+bun add -D eslint-plugin-solid
+```
+
+Add the processor to your ESLint config:
+
+```js
+// eslint.config.js
+import solid from 'eslint-plugin-solid'
+import solidUndestructure from 'vite-plugin-solid-undestructure/eslint'
+
+export default [
+  solidUndestructure.configs.recommended,
+  solid.configs['flat/typescript'],
+  {
+    rules: {
+      'solid/no-destructure': 'off'
+    }
+  }
+]
+```
+
+### How it works
+
+The processor transparently rewrites destructured props into `props.X` member expressions before the linter runs, so the existing `solid/reactivity` rule can correctly identify untracked reactive usages. Error messages are adjusted to reference the original destructured name.
+
+```tsx
+// Without the processor, solid/reactivity ignores `size` (not recognized as reactive)
+// With the processor, it correctly warns:
+function ExampleComponent({ size }: { size: 'sm' | 'lg' }) {
+  const dimensions =
+    // ↓ The reactive variable 'size' should be used within JSX, a tracked scope
+    //   (like createEffect), or inside an event handler. [solid/reactivity]
+    size === 'sm' ? { width: 4, height: 4 } : { width: 8, height: 8 }
+
+  // Correct usages that don't cause warnings:
+  // const dimensions = () => size === 'sm' ? ...
+  // const dimensions = createMemo(() => size === 'sm' ? ...)
+
+  return <img src="..." alt="..." {...dimensions()} />
+}
+```

package.json

@@ -1,11 +1,21 @@
 {
   "name": "vite-plugin-solid-undestructure",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Automatically transforms props destructuring in SolidJS components",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./eslint": {
+      "import": "./dist/eslint/index.js",
+      "types": "./dist/eslint/index.d.ts"
+    }
+  },
   "files": [
     "dist"
   ],
@@ -21,12 +31,13 @@
   ],
   "license": "MIT",
   "scripts": {
-    "build": "bun build src --minify --packages=external --outfile=dist/index.js && tsc --declaration --emitDeclarationOnly --outDir dist",
+    "build": "bun build src/index.ts --minify --packages=external --outfile=dist/index.js && bun build src/eslint/index.ts --minify --packages=external --outfile=dist/eslint/index.js && tsc --declaration --emitDeclarationOnly --outDir dist",
     "type": "tsc --noEmit",
     "lint": "eslint --cache src",
     "format": "prettier --write *",
     "test": "bun test tests",
-    "check:format": "prettier --check *"
+    "check:format": "prettier --check *",
+    "pre": "bun type && bun lint && bun format"
   },
   "dependencies": {
     "@babel/generator": "^7.29.1",
@@ -47,7 +58,16 @@
     "typescript-eslint": "^8.56.1"
   },
   "peerDependencies": {
+    "eslint": "^9.0.0",
     "eslint-plugin-solid": "^0.14.5",
     "vite": "^7.3.1"
+  },
+  "peerDependenciesMeta": {
+    "eslint": {
+      "optional": true
+    },
+    "eslint-plugin-solid": {
+      "optional": true
+    }
   }
 }

src/eslint/index.ts

@@ -0,0 +1,21 @@
+import { processor } from './modules/processor'
+
+const plugin = {
+  meta: {
+    name: 'eslint-plugin-solid-undestructure',
+    version: '0.1.1'
+  },
+  processors: {
+    'solid-undestructure': processor
+  },
+  configs: {} as Record<string, { plugins: Record<string, unknown>; processor: string }>
+}
+
+plugin.configs['recommended'] = {
+  plugins: {
+    'solid-undestructure': plugin
+  },
+  processor: 'solid-undestructure/solid-undestructure'
+}
+
+export default plugin

src/eslint/modules/processor.ts

@@ -0,0 +1,61 @@
+import { transformForLinting, TransformResult } from './transform'
+
+// Store transform metadata per file for postprocess to use
+const transformCache = new Map<string, TransformResult>()
+
+export const processor = {
+  meta: {
+    name: 'solid-undestructure',
+    version: '0.1.1'
+  },
+
+  preprocess(text: string, filename: string) {
+    // Only process files that could contain JSX components
+    if (!/\.(tsx?|jsx?)$/.test(filename)) {
+      return [text]
+    }
+
+    const result = transformForLinting(text)
+    if (!result) {
+      transformCache.delete(filename)
+      return [text]
+    }
+
+    transformCache.set(filename, result)
+    return [result.code]
+  },
+
+  postprocess(messages: { ruleId: string | null; message: string }[][], filename: string) {
+    const result = transformCache.get(filename)
+    if (!result) {
+      return messages[0]
+    }
+
+    transformCache.delete(filename)
+
+    // Build a regex to replace 'props.X' references in messages with the original local name
+    const { propMappings } = result
+    if (propMappings.size === 0) {
+      return messages[0]
+    }
+
+    // Create reverse mapping: propKey → localName
+    const keyToLocal = new Map<string, string>()
+    for (const [localName, propKey] of propMappings) {
+      keyToLocal.set(propKey, localName)
+    }
+
+    return messages[0].map((msg) => {
+      let { message } = msg
+      // Replace 'props.X' with 'X' (the original destructured name) in error messages
+      for (const [localName, propKey] of propMappings) {
+        // Handle both 'props.X' (top-level) and 'props.a.b' (nested) patterns
+        const propsAccess = propKey.includes('.') ? `props.${propKey}` : `props.${propKey}`
+        message = message.replaceAll(`'${propsAccess}'`, `'${localName}'`)
+      }
+      return { ...msg, message }
+    })
+  },
+
+  supportsAutofix: false as const
+}

src/eslint/modules/transform.ts

@@ -0,0 +1,180 @@
+import { checkIfComponent } from '@/modules/component-detector'
+import generateImport from '@babel/generator'
+import { parse } from '@babel/parser'
+import traverseImport, { NodePath, Visitor } from '@babel/traverse'
+import * as t from '@babel/types'
+
+// Handle ESM/CJS interop
+const traverse =
+  (traverseImport as unknown as { default?: typeof traverseImport }).default ?? traverseImport
+const generate =
+  (generateImport as unknown as { default?: typeof generateImport }).default ?? generateImport
+
+export type TransformResult = {
+  code: string
+  /** Maps original local name → prop key (e.g. "localName" → "propKey") */
+  propMappings: Map<string, string>
+}
+
+/**
+ * Transforms destructured component props into `props.X` member expressions
+ * for linting purposes. This is a minimal transformation — no mergeProps/splitProps/imports
+ * are added, only the patterns the eslint-plugin-solid reactivity rule needs to see.
+ */
+export function transformForLinting(code: string): TransformResult | null {
+  // Quick check for destructuring pattern
+  if (!/\(\s*\{/.test(code)) {
+    return null
+  }
+
+  const propMappings = new Map<string, string>()
+
+  let transformed = false
+
+  try {
+    const ast = parse(code, {
+      sourceType: 'module',
+      plugins: ['typescript', 'jsx']
+    })
+
+    const astNode = ast as unknown as t.Node
+    traverse(astNode, {
+      Function(path: NodePath<t.Function>) {
+        const params = path.node.params
+        if (params.length !== 1) return
+
+        const firstParam = params[0]
+        if (!t.isObjectPattern(firstParam)) return
+
+        if (!checkIfComponent(path)) return
+
+        transformDestructuredProps(path, firstParam, propMappings)
+        transformed = true
+      }
+    })
+
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (!transformed) {
+      return null
+    }
+
+    const output = generate(astNode, {
+      retainLines: true,
+      compact: false
+    })
+
+    return { code: output.code, propMappings }
+  } catch (error) {
+    console.warn('Failed to transform:', error)
+    return null
+  }
+}
+
+function transformDestructuredProps(
+  path: NodePath<t.Function>,
+  objectPattern: t.ObjectPattern,
+  propMappings: Map<string, string>
+) {
+  const propsIdentifier = t.identifier('props')
+
+  // Preserve TypeAnnotation from the destructured param
+  if (objectPattern.typeAnnotation) {
+    propsIdentifier.typeAnnotation = objectPattern.typeAnnotation
+  }
+
+  // Extract prop names and build mappings
+  const localNames: string[] = []
+  const localToKey = new Map<string, string>()
+  const nestedPropPaths = new Map<string, string[]>()
+
+  function processObjectPattern(pattern: t.ObjectPattern, parentPath: string[] = []) {
+    for (const prop of pattern.properties) {
+      if (t.isRestElement(prop)) {
+        // Rest elements are not reactive — leave as-is
+        continue
+      }
+
+      if (!t.isObjectProperty(prop)) continue
+
+      let key: string | null = null
+      if (t.isIdentifier(prop.key)) {
+        key = prop.key.name
+      } else if (t.isStringLiteral(prop.key)) {
+        key = prop.key.value
+      }
+      if (!key) continue
+
+      const currentPath = [...parentPath, key]
+
+      // Handle nested object patterns
+      if (t.isObjectPattern(prop.value)) {
+        processObjectPattern(prop.value, currentPath)
+        continue
+      }
+
+      // Extract local name
+      let localName: string | null = null
+      if (t.isIdentifier(prop.value)) {
+        localName = prop.value.name
+      } else if (t.isAssignmentPattern(prop.value) && t.isIdentifier(prop.value.left)) {
+        localName = prop.value.left.name
+      }
+
+      if (!localName) continue
+
+      if (parentPath.length === 0) {
+        localNames.push(localName)
+        localToKey.set(localName, key)
+        propMappings.set(localName, key)
+      } else {
+        nestedPropPaths.set(localName, currentPath)
+        propMappings.set(localName, currentPath.join('.'))
+      }
+    }
+  }
+
+  processObjectPattern(objectPattern)
+
+  // Replace parameter with `props` identifier
+  path.node.params[0] = propsIdentifier
+
+  // Replace all references to destructured prop names with props.X
+  const bodyPath = path.get('body')
+  if (Array.isArray(bodyPath)) return
+
+  const visitor: Visitor = {
+    Identifier(identPath) {
+      const parent = identPath.parent
+      // Skip property keys and computed member expression properties
+      if (
+        (t.isMemberExpression(parent) && parent.property === identPath.node && !parent.computed) ||
+        (t.isObjectProperty(parent) && parent.key === identPath.node && !parent.computed)
+      ) {
+        return
+      }
+
+      // Skip binding positions (declarations)
+      if (identPath.isBindingIdentifier()) return
+
+      const idPath = identPath as NodePath<t.Identifier>
+      const name = idPath.node.name
+
+      // Handle nested property paths
+      const propPath = nestedPropPaths.get(name)
+      if (propPath) {
+        let memberExpr: t.MemberExpression = t.memberExpression(
+          t.identifier('props'),
+          t.identifier(propPath[0])
+        )
+        for (let i = 1; i < propPath.length; i++) {
+          memberExpr = t.memberExpression(memberExpr, t.identifier(propPath[i]))
+        }
+        idPath.replaceWith(memberExpr)
+      } else if (localNames.includes(name)) {
+        const propKey = localToKey.get(name) ?? name
+        idPath.replaceWith(t.memberExpression(t.identifier('props'), t.identifier(propKey)))
+      }
+    }
+  }
+  bodyPath.traverse(visitor)
+}