@pyreon/lint 0.11.0

package/src/rules/index.ts

@@ -0,0 +1,208 @@
+import type { Rule } from "../types"
+import { dialogA11y } from "./accessibility/dialog-a11y"
+import { overlayA11y } from "./accessibility/overlay-a11y"
+// Accessibility
+import { toastA11y } from "./accessibility/toast-a11y"
+import { devGuardWarnings } from "./architecture/dev-guard-warnings"
+// Architecture
+import { noCircularImport } from "./architecture/no-circular-import"
+import { noCrossLayerImport } from "./architecture/no-cross-layer-import"
+import { noDeepImport } from "./architecture/no-deep-import"
+import { noErrorWithoutPrefix } from "./architecture/no-error-without-prefix"
+import { noSubmitWithoutValidation } from "./form/no-submit-without-validation"
+// Form
+import { noUnregisteredField } from "./form/no-unregistered-field"
+import { preferFieldArray } from "./form/prefer-field-array"
+// Hooks
+import { noRawAddEventListener } from "./hooks/no-raw-addeventlistener"
+import { noRawLocalStorage } from "./hooks/no-raw-localstorage"
+import { noRawSetInterval } from "./hooks/no-raw-setinterval"
+import { noAndConditional } from "./jsx/no-and-conditional"
+import { noChildrenAccess } from "./jsx/no-children-access"
+import { noClassName } from "./jsx/no-classname"
+import { noHtmlFor } from "./jsx/no-htmlfor"
+import { noIndexAsBy } from "./jsx/no-index-as-by"
+// JSX
+import { noMapInJsx } from "./jsx/no-map-in-jsx"
+import { noMissingForBy } from "./jsx/no-missing-for-by"
+import { noOnChange } from "./jsx/no-onchange"
+import { noPropsDestructure } from "./jsx/no-props-destructure"
+import { noTernaryConditional } from "./jsx/no-ternary-conditional"
+import { useByNotKey } from "./jsx/use-by-not-key"
+import { noDomInSetup } from "./lifecycle/no-dom-in-setup"
+import { noEffectInMount } from "./lifecycle/no-effect-in-mount"
+// Lifecycle
+import { noMissingCleanup } from "./lifecycle/no-missing-cleanup"
+import { noMountInEffect } from "./lifecycle/no-mount-in-effect"
+import { noEagerImport } from "./performance/no-eager-import"
+import { noEffectInFor } from "./performance/no-effect-in-for"
+// Performance
+import { noLargeForWithoutBy } from "./performance/no-large-for-without-by"
+import { preferShowOverDisplay } from "./performance/prefer-show-over-display"
+// Reactivity
+import { noBareSignalInJsx } from "./reactivity/no-bare-signal-in-jsx"
+import { noEffectAssignment } from "./reactivity/no-effect-assignment"
+import { noNestedEffect } from "./reactivity/no-nested-effect"
+import { noPeekInTracked } from "./reactivity/no-peek-in-tracked"
+import { noSignalInLoop } from "./reactivity/no-signal-in-loop"
+import { noSignalLeak } from "./reactivity/no-signal-leak"
+import { noUnbatchedUpdates } from "./reactivity/no-unbatched-updates"
+import { preferComputed } from "./reactivity/prefer-computed"
+// Router
+import { noHrefNavigation } from "./router/no-href-navigation"
+import { noImperativeNavigateInRender } from "./router/no-imperative-navigate-in-render"
+import { noMissingFallback } from "./router/no-missing-fallback"
+import { preferUseIsActive } from "./router/prefer-use-is-active"
+import { noMismatchRisk } from "./ssr/no-mismatch-risk"
+// SSR
+import { noWindowInSsr } from "./ssr/no-window-in-ssr"
+import { preferRequestContext } from "./ssr/prefer-request-context"
+import { noDuplicateStoreId } from "./store/no-duplicate-store-id"
+import { noMutateStoreState } from "./store/no-mutate-store-state"
+// Store
+import { noStoreOutsideProvider } from "./store/no-store-outside-provider"
+import { noDynamicStyled } from "./styling/no-dynamic-styled"
+// Styling
+import { noInlineStyleObject } from "./styling/no-inline-style-object"
+import { noThemeOutsideProvider } from "./styling/no-theme-outside-provider"
+import { preferCx } from "./styling/prefer-cx"
+
+export const allRules: Rule[] = [
+  // Reactivity (8)
+  noBareSignalInJsx,
+  noSignalInLoop,
+  noNestedEffect,
+  noPeekInTracked,
+  noUnbatchedUpdates,
+  preferComputed,
+  noEffectAssignment,
+  noSignalLeak,
+  // JSX (11)
+  noMapInJsx,
+  useByNotKey,
+  noClassName,
+  noHtmlFor,
+  noOnChange,
+  noTernaryConditional,
+  noAndConditional,
+  noIndexAsBy,
+  noMissingForBy,
+  noPropsDestructure,
+  noChildrenAccess,
+  // Lifecycle (4)
+  noMissingCleanup,
+  noMountInEffect,
+  noEffectInMount,
+  noDomInSetup,
+  // Performance (4)
+  noLargeForWithoutBy,
+  noEffectInFor,
+  noEagerImport,
+  preferShowOverDisplay,
+  // SSR (3)
+  noWindowInSsr,
+  noMismatchRisk,
+  preferRequestContext,
+  // Architecture (5)
+  noCircularImport,
+  noDeepImport,
+  noCrossLayerImport,
+  devGuardWarnings,
+  noErrorWithoutPrefix,
+  // Store (3)
+  noStoreOutsideProvider,
+  noMutateStoreState,
+  noDuplicateStoreId,
+  // Form (3)
+  noUnregisteredField,
+  noSubmitWithoutValidation,
+  preferFieldArray,
+  // Styling (4)
+  noInlineStyleObject,
+  noDynamicStyled,
+  preferCx,
+  noThemeOutsideProvider,
+  // Hooks (3)
+  noRawAddEventListener,
+  noRawSetInterval,
+  noRawLocalStorage,
+  // Accessibility (3)
+  toastA11y,
+  dialogA11y,
+  overlayA11y,
+  // Router (4)
+  noHrefNavigation,
+  noImperativeNavigateInRender,
+  noMissingFallback,
+  preferUseIsActive,
+]
+
+// Re-export all rules individually
+export {
+  devGuardWarnings,
+  dialogA11y,
+  noAndConditional,
+  // Reactivity
+  noBareSignalInJsx,
+  noChildrenAccess,
+  // Architecture
+  noCircularImport,
+  noClassName,
+  noCrossLayerImport,
+  noDeepImport,
+  noDomInSetup,
+  noDuplicateStoreId,
+  noDynamicStyled,
+  noEagerImport,
+  noEffectAssignment,
+  noEffectInFor,
+  noEffectInMount,
+  noErrorWithoutPrefix,
+  noHrefNavigation,
+  noHtmlFor,
+  noImperativeNavigateInRender,
+  noIndexAsBy,
+  // Styling
+  noInlineStyleObject,
+  // Performance
+  noLargeForWithoutBy,
+  // JSX
+  noMapInJsx,
+  noMismatchRisk,
+  // Lifecycle
+  noMissingCleanup,
+  noMissingFallback,
+  noMissingForBy,
+  noMountInEffect,
+  noMutateStoreState,
+  noNestedEffect,
+  noOnChange,
+  noPeekInTracked,
+  noPropsDestructure,
+  // Hooks
+  noRawAddEventListener,
+  noRawLocalStorage,
+  noRawSetInterval,
+  noSignalInLoop,
+  noSignalLeak,
+  // Store
+  noStoreOutsideProvider,
+  noSubmitWithoutValidation,
+  noTernaryConditional,
+  noThemeOutsideProvider,
+  noUnbatchedUpdates,
+  // Form
+  noUnregisteredField,
+  // SSR
+  noWindowInSsr,
+  overlayA11y,
+  preferComputed,
+  preferCx,
+  preferFieldArray,
+  preferRequestContext,
+  preferShowOverDisplay,
+  preferUseIsActive,
+  // Accessibility
+  toastA11y,
+  useByNotKey,
+}

package/src/rules/jsx/no-and-conditional.ts

@@ -0,0 +1,32 @@
+import type { Rule, VisitorCallbacks } from "../../types"
+import { getSpan, isLogicalAndWithJSX } from "../../utils/ast"
+
+export const noAndConditional: Rule = {
+  meta: {
+    id: "pyreon/no-and-conditional",
+    category: "jsx",
+    description: "Prefer <Show> over `&&` with JSX in expression containers.",
+    severity: "warn",
+    fixable: false,
+  },
+  create(context) {
+    let jsxExpressionDepth = 0
+    const callbacks: VisitorCallbacks = {
+      JSXExpressionContainer() {
+        jsxExpressionDepth++
+      },
+      "JSXExpressionContainer:exit"() {
+        jsxExpressionDepth--
+      },
+      LogicalExpression(node: any) {
+        if (jsxExpressionDepth === 0) return
+        if (!isLogicalAndWithJSX(node)) return
+        context.report({
+          message: "`&&` with JSX — use `<Show>` for conditional rendering.",
+          span: getSpan(node),
+        })
+      },
+    }
+    return callbacks
+  },
+}

package/src/rules/jsx/no-children-access.ts

@@ -0,0 +1,44 @@
+import type { Rule, VisitorCallbacks } from "../../types"
+import { getSpan } from "../../utils/ast"
+import { extractImportInfo, type ImportInfo } from "../../utils/imports"
+
+export const noChildrenAccess: Rule = {
+  meta: {
+    id: "pyreon/no-children-access",
+    category: "jsx",
+    description: "Inform about direct props.children access in renderer files.",
+    severity: "info",
+    fixable: false,
+  },
+  create(context) {
+    const imports: ImportInfo[] = []
+    let isRendererFile = false
+
+    const callbacks: VisitorCallbacks = {
+      ImportDeclaration(node: any) {
+        const info = extractImportInfo(node)
+        if (info) {
+          imports.push(info)
+          if (info.source === "@pyreon/runtime-server" || info.source === "@pyreon/runtime-dom") {
+            isRendererFile = true
+          }
+        }
+      },
+      MemberExpression(node: any) {
+        if (!isRendererFile) return
+        if (
+          node.object?.type === "Identifier" &&
+          node.property?.type === "Identifier" &&
+          node.property.name === "children"
+        ) {
+          context.report({
+            message:
+              "Direct `props.children` access in a renderer file — children are already merged via `mergeChildrenIntoProps`.",
+            span: getSpan(node),
+          })
+        }
+      },
+    }
+    return callbacks
+  },
+}

package/src/rules/jsx/no-classname.ts

@@ -0,0 +1,27 @@
+import type { Rule, VisitorCallbacks } from "../../types"
+import { getSpan } from "../../utils/ast"
+
+export const noClassName: Rule = {
+  meta: {
+    id: "pyreon/no-classname",
+    category: "jsx",
+    description: "Use `class` instead of `className` — Pyreon uses standard HTML attributes.",
+    severity: "error",
+    fixable: true,
+  },
+  create(context) {
+    const callbacks: VisitorCallbacks = {
+      JSXAttribute(node: any) {
+        if (node.name?.type !== "JSXIdentifier") return
+        if (node.name.name !== "className") return
+        const nameSpan = getSpan(node.name)
+        context.report({
+          message: "Use `class` instead of `className` — Pyreon uses standard HTML attributes.",
+          span: getSpan(node),
+          fix: { span: nameSpan, replacement: "class" },
+        })
+      },
+    }
+    return callbacks
+  },
+}

package/src/rules/jsx/no-htmlfor.ts

@@ -0,0 +1,27 @@
+import type { Rule, VisitorCallbacks } from "../../types"
+import { getSpan } from "../../utils/ast"
+
+export const noHtmlFor: Rule = {
+  meta: {
+    id: "pyreon/no-htmlfor",
+    category: "jsx",
+    description: "Use `for` instead of `htmlFor` — Pyreon uses standard HTML attributes.",
+    severity: "error",
+    fixable: true,
+  },
+  create(context) {
+    const callbacks: VisitorCallbacks = {
+      JSXAttribute(node: any) {
+        if (node.name?.type !== "JSXIdentifier") return
+        if (node.name.name !== "htmlFor") return
+        const nameSpan = getSpan(node.name)
+        context.report({
+          message: "Use `for` instead of `htmlFor` — Pyreon uses standard HTML attributes.",
+          span: getSpan(node),
+          fix: { span: nameSpan, replacement: "for" },
+        })
+      },
+    }
+    return callbacks
+  },
+}

package/src/rules/jsx/no-index-as-by.ts

@@ -0,0 +1,70 @@
+import type { Rule, VisitorCallbacks } from "../../types"
+import { getJSXAttribute, getSpan } from "../../utils/ast"
+
+export const noIndexAsBy: Rule = {
+  meta: {
+    id: "pyreon/no-index-as-by",
+    category: "jsx",
+    description: "Disallow using index as `by` prop on <For> — use a unique key instead.",
+    severity: "warn",
+    fixable: false,
+  },
+  create(context) {
+    const callbacks: VisitorCallbacks = {
+      JSXOpeningElement(node: any) {
+        const name = node.name
+        if (!name || name.type !== "JSXIdentifier" || name.name !== "For") return
+
+        const byAttr = getJSXAttribute(node, "by")
+        if (!byAttr) return
+
+        const value = byAttr.value
+        if (!value || value.type !== "JSXExpressionContainer") return
+
+        const expr = value.expression
+        if (!expr) return
+
+        // Detect: by={(_, i) => i} or by={(item, index) => index}
+        if (expr.type === "ArrowFunctionExpression" || expr.type === "FunctionExpression") {
+          const params = expr.params
+          if (!params || params.length < 2) return
+
+          const secondParam = params[1]
+          if (!secondParam || secondParam.type !== "Identifier") return
+
+          const indexName = secondParam.name
+          const body = expr.body
+
+          // Arrow expression body: (_, i) => i
+          if (body?.type === "Identifier" && body.name === indexName) {
+            context.report({
+              message:
+                "Using index as `by` prop on `<For>` — use a unique key from the data instead.",
+              span: getSpan(byAttr),
+            })
+          }
+
+          // Block body: (_, i) => { return i }
+          if (body?.type === "BlockStatement") {
+            const stmts = body.body
+            if (stmts?.length === 1) {
+              const stmt = stmts[0]
+              if (
+                stmt.type === "ReturnStatement" &&
+                stmt.argument?.type === "Identifier" &&
+                stmt.argument.name === indexName
+              ) {
+                context.report({
+                  message:
+                    "Using index as `by` prop on `<For>` — use a unique key from the data instead.",
+                  span: getSpan(byAttr),
+                })
+              }
+            }
+          }
+        }
+      },
+    }
+    return callbacks
+  },
+}

package/src/rules/jsx/no-map-in-jsx.ts

@@ -0,0 +1,43 @@
+import type { Rule, VisitorCallbacks } from "../../types"
+import { getSpan, isArrayMapCall } from "../../utils/ast"
+
+export const noMapInJsx: Rule = {
+  meta: {
+    id: "pyreon/no-map-in-jsx",
+    category: "jsx",
+    description: "Prefer <For> over .map() inside JSX for reactive list rendering.",
+    severity: "warn",
+    fixable: false,
+  },
+  create(context) {
+    let jsxDepth = 0
+    const callbacks: VisitorCallbacks = {
+      JSXElement() {
+        jsxDepth++
+      },
+      "JSXElement:exit"() {
+        jsxDepth--
+      },
+      JSXFragment() {
+        jsxDepth++
+      },
+      "JSXFragment:exit"() {
+        jsxDepth--
+      },
+      CallExpression(node: any) {
+        if (jsxDepth === 0) return
+        if (!isArrayMapCall(node)) return
+        // Check callback contains JSX
+        const args = node.arguments
+        if (!args || args.length === 0) return
+        const callback = args[0]
+        if (!callback) return
+        context.report({
+          message: "`.map()` in JSX — use `<For>` for reactive list rendering instead.",
+          span: getSpan(node),
+        })
+      },
+    }
+    return callbacks
+  },
+}

package/src/rules/jsx/no-missing-for-by.ts

@@ -0,0 +1,27 @@
+import type { Rule, VisitorCallbacks } from "../../types"
+import { getSpan, hasJSXAttribute } from "../../utils/ast"
+
+export const noMissingForBy: Rule = {
+  meta: {
+    id: "pyreon/no-missing-for-by",
+    category: "jsx",
+    description: "Warn when <For> is used without a `by` prop.",
+    severity: "warn",
+    fixable: false,
+  },
+  create(context) {
+    const callbacks: VisitorCallbacks = {
+      JSXOpeningElement(node: any) {
+        const name = node.name
+        if (!name || name.type !== "JSXIdentifier" || name.name !== "For") return
+        if (hasJSXAttribute(node, "by")) return
+        context.report({
+          message:
+            "`<For>` without `by` prop — provide a key function for efficient reconciliation.",
+          span: getSpan(node),
+        })
+      },
+    }
+    return callbacks
+  },
+}

package/src/rules/jsx/no-onchange.ts

@@ -0,0 +1,46 @@
+import type { Rule, VisitorCallbacks } from "../../types"
+import { getSpan } from "../../utils/ast"
+
+const INPUT_TAGS = new Set(["input", "textarea", "select"])
+
+export const noOnChange: Rule = {
+  meta: {
+    id: "pyreon/no-onchange",
+    category: "jsx",
+    description:
+      "Prefer `onInput` over `onChange` on input elements for keypress-by-keypress updates.",
+    severity: "warn",
+    fixable: true,
+  },
+  create(context) {
+    let currentTag: string | null = null
+    const callbacks: VisitorCallbacks = {
+      JSXOpeningElement(node: any) {
+        const name = node.name
+        if (name?.type === "JSXIdentifier" && INPUT_TAGS.has(name.name)) {
+          currentTag = name.name
+        } else {
+          currentTag = null
+        }
+
+        if (!currentTag) return
+        const attrs = node.attributes ?? []
+        for (const attr of attrs) {
+          if (
+            attr.type === "JSXAttribute" &&
+            attr.name?.type === "JSXIdentifier" &&
+            attr.name.name === "onChange"
+          ) {
+            const nameSpan = getSpan(attr.name)
+            context.report({
+              message: `Use \`onInput\` instead of \`onChange\` on \`<${currentTag}>\` for keypress-by-keypress updates.`,
+              span: getSpan(attr),
+              fix: { span: nameSpan, replacement: "onInput" },
+            })
+          }
+        }
+      },
+    }
+    return callbacks
+  },
+}

package/src/rules/jsx/no-props-destructure.ts

@@ -0,0 +1,64 @@
+import type { Rule, VisitorCallbacks } from "../../types"
+import { getSpan, isDestructuring } from "../../utils/ast"
+
+function containsJSXReturn(node: any): boolean {
+  if (!node) return false
+  // Arrow with expression body returning JSX
+  if (node.type === "JSXElement" || node.type === "JSXFragment") return true
+  if (node.type === "ParenthesizedExpression") return containsJSXReturn(node.expression)
+
+  // Block body — look for return statements with JSX
+  if (node.type === "BlockStatement") {
+    for (const stmt of node.body ?? []) {
+      if (stmt.type === "ReturnStatement" && containsJSXReturn(stmt.argument)) {
+        return true
+      }
+    }
+  }
+  return false
+}
+
+export const noPropsDestructure: Rule = {
+  meta: {
+    id: "pyreon/no-props-destructure",
+    category: "jsx",
+    description:
+      "Disallow destructuring props in component functions — it breaks signal reactivity.",
+    severity: "error",
+    fixable: false,
+  },
+  create(context) {
+    const callbacks: VisitorCallbacks = {
+      ArrowFunctionExpression(node: any) {
+        checkFunction(node, context)
+      },
+      FunctionDeclaration(node: any) {
+        checkFunction(node, context)
+      },
+      FunctionExpression(node: any) {
+        checkFunction(node, context)
+      },
+    }
+    return callbacks
+  },
+}
+
+function checkFunction(node: any, context: any) {
+  const params = node.params
+  if (!params || params.length === 0) return
+
+  const firstParam = params[0]
+  if (!isDestructuring(firstParam)) return
+
+  // Check if this function returns JSX
+  const body = node.body
+  if (!body) return
+
+  if (containsJSXReturn(body)) {
+    context.report({
+      message:
+        "Destructured props in a component function — this breaks signal reactivity. Use `props.x` or `splitProps()` instead.",
+      span: getSpan(firstParam),
+    })
+  }
+}

package/src/rules/jsx/no-ternary-conditional.ts

@@ -0,0 +1,32 @@
+import type { Rule, VisitorCallbacks } from "../../types"
+import { getSpan, isTernaryWithJSX } from "../../utils/ast"
+
+export const noTernaryConditional: Rule = {
+  meta: {
+    id: "pyreon/no-ternary-conditional",
+    category: "jsx",
+    description: "Prefer <Show> over ternary expressions with JSX branches.",
+    severity: "warn",
+    fixable: false,
+  },
+  create(context) {
+    let jsxExpressionDepth = 0
+    const callbacks: VisitorCallbacks = {
+      JSXExpressionContainer() {
+        jsxExpressionDepth++
+      },
+      "JSXExpressionContainer:exit"() {
+        jsxExpressionDepth--
+      },
+      ConditionalExpression(node: any) {
+        if (jsxExpressionDepth === 0) return
+        if (!isTernaryWithJSX(node)) return
+        context.report({
+          message: "Ternary with JSX — use `<Show>` for more efficient conditional rendering.",
+          span: getSpan(node),
+        })
+      },
+    }
+    return callbacks
+  },
+}

package/src/rules/jsx/use-by-not-key.ts

@@ -0,0 +1,33 @@
+import type { Rule, VisitorCallbacks } from "../../types"
+import { getJSXAttribute, getSpan, hasJSXAttribute } from "../../utils/ast"
+
+export const useByNotKey: Rule = {
+  meta: {
+    id: "pyreon/use-by-not-key",
+    category: "jsx",
+    description:
+      "Use `by` prop on <For> instead of `key` — JSX reserves `key` for VNode reconciliation.",
+    severity: "error",
+    fixable: true,
+  },
+  create(context) {
+    const callbacks: VisitorCallbacks = {
+      JSXOpeningElement(node: any) {
+        const tagName = node.name?.type === "JSXIdentifier" ? node.name.name : null
+        if (tagName !== "For") return
+        const keyAttr = getJSXAttribute(node, "key")
+        if (!keyAttr) return
+        if (hasJSXAttribute(node, "by")) return // already has by
+
+        const attrSpan = getSpan(keyAttr.name)
+        context.report({
+          message:
+            "Use `by` prop on `<For>` instead of `key` — JSX reserves `key` for VNode reconciliation.",
+          span: getSpan(keyAttr),
+          fix: { span: attrSpan, replacement: "by" },
+        })
+      },
+    }
+    return callbacks
+  },
+}