@tuomashatakka/eslint-config 2.6.2 → 3.1.0

package/plugins/omit/utils.mjs

@@ -0,0 +1,91 @@
+const RESERVED_WORDS = new Set([
+  'await',
+  'break',
+  'case',
+  'catch',
+  'class',
+  'const',
+  'continue',
+  'debugger',
+  'default',
+  'delete',
+  'do',
+  'else',
+  'enum',
+  'export',
+  'extends',
+  'false',
+  'finally',
+  'for',
+  'function',
+  'if',
+  'implements',
+  'import',
+  'in',
+  'instanceof',
+  'interface',
+  'let',
+  'new',
+  'null',
+  'package',
+  'private',
+  'protected',
+  'public',
+  'return',
+  'static',
+  'super',
+  'switch',
+  'this',
+  'throw',
+  'true',
+  'try',
+  'typeof',
+  'var',
+  'void',
+  'while',
+  'with',
+  'yield',
+])
+
+
+export
+
+
+function isValidDotNotationIdentifier (name) {
+  const identifierRegex = /^[\p{L}\p{Nl}$_][\p{L}\p{Nl}\p{Mn}\p{Mc}\p{Nd}\p{Pc}$_]*$/u
+  if (typeof name !== 'string' || name.length === 0)
+    return false
+  return identifierRegex.test(name) && !RESERVED_WORDS.has(name)
+}
+
+
+export
+
+
+function isDeclaration (statement) {
+  return statement.type === 'VariableDeclaration' ||
+    statement.type === 'FunctionDeclaration' ||
+    statement.type === 'ClassDeclaration'
+}
+
+
+export
+
+
+function isParenthesized (node, sourceCode) {
+  const previousToken = sourceCode.getTokenBefore(node)
+  const nextToken     = sourceCode.getTokenAfter(node)
+
+  return Boolean(
+    previousToken && nextToken &&
+    previousToken.value === '(' && previousToken.range[1] <= node.range[0] &&
+    nextToken.value === ')' && nextToken.range[0] >= node.range[1]
+  )
+}
+
+
+export default {
+  isParenthesized,
+  isDeclaration,
+  isValidDotNotationIdentifier,
+}

package/plugins/react-strict/index.mjs

@@ -0,0 +1,19 @@
+import noStyleProp from './rules/no-style-prop.mjs'
+import noNestedDivs from './rules/no-nested-divs.mjs'
+import noComplexJsxMap from './rules/no-complex-jsx-map.mjs'
+import preferNoUseEffect from './rules/prefer-no-use-effect.mjs'
+import noJsxValueCalculations from './rules/no-jsx-value-calculations.mjs'
+import jsxPropLayout from './rules/jsx-prop-layout.mjs'
+
+
+export const rules = {
+  'no-style-prop':             noStyleProp,
+  'no-nested-divs':            noNestedDivs,
+  'no-complex-jsx-map':        noComplexJsxMap,
+  'prefer-no-use-effect':      preferNoUseEffect,
+  'no-jsx-value-calculations': noJsxValueCalculations,
+  'jsx-prop-layout':           jsxPropLayout,
+}
+
+
+export default { rules }

package/plugins/react-strict/rules/jsx-prop-layout.mjs

@@ -0,0 +1,100 @@
+const RESERVED_PROPS                                                                                                                         = new Set([
+  'key',
+  'ref',
+])
+const STYLE_PROPS                                                                                                                      = new Set([
+  'className',
+  'style',
+  'id',
+])
+
+
+function getPropName (attr) {
+  if (attr.type === 'JSXSpreadAttribute')
+    return null
+
+  if (attr.name.type === 'JSXIdentifier')
+    return attr.name.name
+
+  if (attr.name.type === 'JSXNamespacedName')
+    return `${attr.name.namespace.name}:${attr.name.name.name}`
+
+  return null
+}
+
+
+function getPropGroup (name) {
+  if (!name)
+    return 4 // spread attributes — middle
+
+  if (RESERVED_PROPS.has(name))
+    return 0
+
+  if (STYLE_PROPS.has(name))
+    return 1
+
+  if (name.startsWith('data-') || name.startsWith('aria-'))
+    return 2
+
+  if (name.startsWith('on') && name[2] === name[2].toUpperCase())
+    return 5
+
+  return 3
+}
+
+
+export default {
+  meta: {
+    type:    'suggestion',
+    docs:    { description: 'Enforce consistent JSX prop ordering: key/ref first, className/style next, data/aria attrs, then regular props, callbacks last' },
+    fixable: 'code',
+    schema:  [],
+    messages: {
+      propOrder: '`{{ current }}` should be placed before `{{ previous }}` ({{ currentGroup }} props should come before {{ previousGroup }} props).',
+    },
+  },
+  create (context) {
+    const groupNames = [
+      'reserved',
+      'style/class',
+      'data/aria',
+      'regular',
+      'spread',
+      'callback',
+    ]
+
+    return {
+      JSXOpeningElement (node) {
+        const attrs = node.attributes
+
+        if (attrs.length < 2)
+          return
+
+        let lastGroup = -1
+        let lastName  = null
+
+        for (const attr of attrs) {
+          const name  = getPropName(attr)
+          const group = getPropGroup(name)
+
+          if (group < lastGroup) {
+            context.report({
+              node:      attr,
+              messageId: 'propOrder',
+              data:      {
+                current:       name || '{...spread}',
+                previous:      lastName || '{...spread}',
+                currentGroup:  groupNames[group],
+                previousGroup: groupNames[lastGroup],
+              },
+            })
+            break
+          }
+
+          lastGroup = group
+          lastName = name
+        }
+      },
+    }
+  },
+}

package/plugins/react-strict/rules/no-complex-jsx-map.mjs

@@ -0,0 +1,66 @@
+function isInsideJSXExpression (node) {
+  let current = node.parent
+
+  while (current) {
+    if (current.type === 'JSXExpressionContainer')
+      return true
+
+    current = current.parent
+  }
+
+  return false
+}
+
+
+function hasComplexBody (callbackBody) {
+  if (callbackBody.type === 'BlockStatement') {
+    const hasIfOrSwitch = callbackBody.body.some(stmt =>
+      stmt.type === 'IfStatement' || stmt.type === 'SwitchStatement')
+
+    if (hasIfOrSwitch)
+      return true
+
+    if (callbackBody.body.length > 3)
+      return true
+  }
+
+  return false
+}
+
+
+export default {
+  meta: {
+    type:    'suggestion',
+    docs:    { description: 'Disallow complex .map() callbacks with inline logic inside JSX' },
+    fixable: null,
+    schema:  [],
+    messages: {
+      noComplexMap: 'Extract complex .map() callback into a separate component. Move conditional logic outside the JSX return block.',
+    },
+  },
+  create (context) {
+    return {
+      CallExpression (node) {
+        if (
+          node.callee.type !== 'MemberExpression' ||
+          node.callee.property.type !== 'Identifier' ||
+          node.callee.property.name !== 'map'
+        )
+          return
+
+        if (!isInsideJSXExpression(node))
+          return
+
+        const callback = node.arguments[0]
+
+        if (!callback)
+          return
+
+        if (callback.type === 'ArrowFunctionExpression' || callback.type === 'FunctionExpression') {
+          if (hasComplexBody(callback.body))
+            context.report({ node, messageId: 'noComplexMap' })
+        }
+      },
+    }
+  },
+}

package/plugins/react-strict/rules/no-jsx-value-calculations.mjs

@@ -0,0 +1,99 @@
+function isComponentFunction (node) {
+  let current = node
+
+  while (current) {
+    if (
+      current.type === 'ArrowFunctionExpression' ||
+      current.type === 'FunctionExpression' ||
+      current.type === 'FunctionDeclaration'
+    ) {
+      const parent = current.parent
+
+      if (parent && parent.type === 'VariableDeclarator' && parent.id.type === 'Identifier') {
+        const name = parent.id.name
+
+        if (name[0] === name[0].toUpperCase() && name[0] !== name[0].toLowerCase())
+          return true
+      }
+
+      if (current.type === 'FunctionDeclaration' && current.id) {
+        const name = current.id.name
+
+        if (name[0] === name[0].toUpperCase() && name[0] !== name[0].toLowerCase())
+          return true
+      }
+    }
+
+    current = current.parent
+  }
+
+  return false
+}
+
+
+function isInsideReturnJSX (node) {
+  let current = node.parent
+
+  while (current) {
+    if (current.type === 'ReturnStatement')
+      return true
+
+    if (current.type === 'ArrowFunctionExpression' && current.body.type !== 'BlockStatement')
+      return true
+
+    if (
+      current.type === 'FunctionDeclaration' ||
+      current.type === 'FunctionExpression' ||
+      current.type === 'ArrowFunctionExpression'
+    )
+      return false
+
+    current = current.parent
+  }
+
+  return false
+}
+
+
+export default {
+  meta: {
+    type:    'suggestion',
+    docs:    { description: 'Disallow value calculations and assignments inside JSX return blocks' },
+    fixable: null,
+    schema:  [],
+    messages: {
+      noJsxCalculations: 'Move value calculations and assignments outside the return block. Compute values before the return statement.',
+    },
+  },
+  create (context) {
+    return {
+      JSXExpressionContainer (node) {
+        if (!isComponentFunction(node) || !isInsideReturnJSX(node))
+          return
+
+        const expr = node.expression
+
+        if (!expr || expr.type === 'JSXEmptyExpression')
+          return
+
+        if (expr.type === 'AssignmentExpression') {
+          context.report({ node: expr, messageId: 'noJsxCalculations' })
+          return
+        }
+
+        if (expr.type === 'SequenceExpression') {
+          const hasAssignment = expr.expressions.some(e => e.type === 'AssignmentExpression')
+
+          if (hasAssignment)
+            context.report({ node: expr, messageId: 'noJsxCalculations' })
+        }
+      },
+      VariableDeclaration (node) {
+        if (!isComponentFunction(node) || !isInsideReturnJSX(node))
+          return
+
+        context.report({ node, messageId: 'noJsxCalculations' })
+      },
+    }
+  },
+}

package/plugins/react-strict/rules/no-nested-divs.mjs

@@ -0,0 +1,59 @@
+const SEMANTIC_ALTERNATIVES = [
+  'main',
+  'section',
+  'article',
+  'aside',
+  'header',
+  'footer',
+  'nav',
+  'figure',
+  'figcaption',
+  'details',
+  'summary',
+  'dialog',
+]
+
+
+function getElementName (node) {
+  if (node.type === 'JSXElement' && node.openingElement.name.type === 'JSXIdentifier')
+    return node.openingElement.name.name
+
+  return null
+}
+
+
+export default {
+  meta: {
+    type:    'suggestion',
+    docs:    { description: 'Disallow nested div elements; prefer semantic HTML5 tags' },
+    fixable: null,
+    schema:  [],
+    messages: {
+      noNestedDivs: 'Avoid nesting <div> inside <div>. Use semantic HTML5 elements instead ({{ alternatives }}).',
+    },
+  },
+  create (context) {
+    return {
+      JSXElement (node) {
+        const name = getElementName(node)
+
+        if (name !== 'div')
+          return
+
+        const parent = node.parent
+
+        if (parent.type !== 'JSXElement')
+          return
+
+        const parentName = getElementName(parent)
+
+        if (parentName === 'div')
+          context.report({
+            node:      node.openingElement,
+            messageId: 'noNestedDivs',
+            data:      { alternatives: SEMANTIC_ALTERNATIVES.join(', ') },
+          })
+      },
+    }
+  },
+}

package/plugins/react-strict/rules/no-style-prop.mjs

@@ -0,0 +1,43 @@
+const DRAG_DROP_HANDLERS = new Set([
+  'onDrag',
+  'onDragStart',
+  'onDragEnd',
+  'onDragEnter',
+  'onDragLeave',
+  'onDragOver',
+  'onDrop',
+])
+
+
+export default {
+  meta: {
+    type:    'suggestion',
+    docs:    { description: 'Disallow inline style props unless used with drag/drop interactions' },
+    fixable: null,
+    schema:  [],
+    messages: {
+      noStyleProp: 'Avoid inline style props. Use CSS classes or styled components instead. Inline styles are only acceptable for dynamic user interaction scenarios like drag/drop.',
+    },
+  },
+  create (context) {
+    return {
+      JSXAttribute (node) {
+        if (node.name.type !== 'JSXIdentifier' || node.name.name !== 'style')
+          return
+
+        const opening = node.parent
+
+        if (opening.type !== 'JSXOpeningElement')
+          return
+
+        const hasDragHandler = opening.attributes.some(attr =>
+          attr.type === 'JSXAttribute' &&
+          attr.name.type === 'JSXIdentifier' &&
+          DRAG_DROP_HANDLERS.has(attr.name.name))
+
+        if (!hasDragHandler)
+          context.report({ node, messageId: 'noStyleProp' })
+      },
+    }
+  },
+}

package/plugins/react-strict/rules/prefer-no-use-effect.mjs

@@ -0,0 +1,26 @@
+export default {
+  meta: {
+    type:    'suggestion',
+    docs:    { description: 'Discourage useEffect in favor of React context, custom hooks, or event-driven patterns' },
+    fixable: null,
+    schema:  [],
+    messages: {
+      preferNoUseEffect: 'Consider alternatives to useEffect. Extract side effects into React context, a custom hook in a separate module, or use event-driven patterns.',
+    },
+  },
+  create (context) {
+    return {
+      CallExpression (node) {
+        const isDirectCall = node.callee.type === 'Identifier' &&
+          node.callee.name === 'useEffect'
+
+        const isMemberCall = node.callee.type === 'MemberExpression' &&
+          node.callee.property.type === 'Identifier' &&
+          node.callee.property.name === 'useEffect'
+
+        if (isDirectCall || isMemberCall)
+          context.report({ node, messageId: 'preferNoUseEffect' })
+      },
+    }
+  },
+}

package/plugins/whitespaced/index.mjs

@@ -0,0 +1,15 @@
+/**
+ * @fileoverview Simplified ESLint plugin for whitespaced formatting
+ * 
+ * Retained rules:
+ * - aligned-assignments: Enforce vertical alignment for variable assignments and type annotations
+ */
+
+import alignedAssignments from './rules/aligned-assignments.mjs'
+
+
+export default {
+  rules: {
+    "aligned-assignments": alignedAssignments,
+  },
+}