what-devtools-mcp 0.6.0 → 0.6.3

package/src/tools-agent.js

@@ -120,6 +120,18 @@ effect(() => {
 // Good — stable key:
 <For each={items()}>{item => <li key={item.id}>{item.name}</li>}</For>`,
   },
+  HINT_PREFER_COMPUTED: {
+    code: 'HINT_PREFER_COMPUTED',
+    severity: 'info',
+    diagnosis: 'An effect is only used to derive a value from other signals. This is better expressed as a computed() signal, which is lazy and more efficient.',
+    suggestedFix: 'Replace the effect + signal pair with a single computed() signal.',
+    codeExample: `// Before — effect + signal (runs eagerly, more memory):
+const doubled = signal(0);
+effect(() => { doubled(count() * 2); });
+
+// After — computed (lazy, efficient):
+const doubled = computed(() => count() * 2);`,
+  },
 };
 
 // --- Lint Patterns ---
@@ -257,6 +269,168 @@ const LINT_RULES = [
       return issues;
     },
   },
+  {
+    id: 'signal-write-in-render',
+    code: 'ERR_SIGNAL_WRITE_IN_RENDER',
+    severity: 'error',
+    test(code) {
+      const issues = [];
+      // Find signal declarations
+      const signalDecls = [...code.matchAll(/(?:const|let)\s+(\w+)\s*=\s*(?:signal|useSignal)\s*\(/g)];
+      const signalNames = signalDecls.map(m => m[1]);
+
+      // Find component functions (PascalCase function declarations)
+      const componentPattern = /function\s+([A-Z]\w*)\s*\([^)]*\)\s*\{/g;
+      let compMatch;
+      while ((compMatch = componentPattern.exec(code)) !== null) {
+        // Get the component body (rough extraction)
+        const startIdx = compMatch.index + compMatch[0].length;
+        let braceDepth = 1;
+        let bodyEnd = startIdx;
+        for (let i = startIdx; i < code.length && braceDepth > 0; i++) {
+          if (code[i] === '{') braceDepth++;
+          if (code[i] === '}') braceDepth--;
+          bodyEnd = i;
+        }
+        const body = code.slice(startIdx, bodyEnd);
+
+        // For each signal, check if it's written at the TOP LEVEL of the component body
+        // (not inside effect(), onMount(), setTimeout, event handlers, arrow functions)
+        for (const name of signalNames) {
+          // Look for signal writes: name(someValue) where someValue is not empty
+          const writePattern = new RegExp(`(?<!\\w)${name}\\s*\\((?!\\s*\\))(?!.*=>)`, 'g');
+          let writeMatch;
+          while ((writeMatch = writePattern.exec(body)) !== null) {
+            // Check if this write is inside a nested function/callback
+            const beforeWrite = body.slice(0, writeMatch.index);
+            const nestedDepth = (beforeWrite.match(/(?:effect|onMount|setTimeout|setInterval|addEventListener|=>)\s*(?:\([^)]*\)\s*)?\{/g) || []).length;
+            const closingBraces = (beforeWrite.match(/\}/g) || []).length;
+
+            // If we're at top level of the component (not inside a nested callback)
+            if (nestedDepth <= closingBraces) {
+              // Check it's not a signal READ (no args or the call is just `name()`)
+              const fullCall = body.slice(writeMatch.index, writeMatch.index + writeMatch[0].length + 50);
+              if (!fullCall.match(new RegExp(`^${name}\\s*\\(\\s*\\)`))) {
+                const line = code.slice(0, compMatch.index + compMatch[0].length + writeMatch.index).split('\n').length;
+                issues.push({
+                  severity: 'error',
+                  code: 'ERR_SIGNAL_WRITE_IN_RENDER',
+                  message: `Signal "${name}" written during render in ${compMatch[1]}. Move signal writes into event handlers, effects, or onMount().`,
+                  line,
+                  suggestedFix: `Move ${name}(...) into an effect() or event handler.`,
+                });
+              }
+            }
+          }
+        }
+      }
+      return issues;
+    },
+  },
+  {
+    id: 'missing-key-in-for',
+    code: 'ERR_MISSING_KEY',
+    severity: 'warning',
+    test(code) {
+      const issues = [];
+      // Match <For each={...}> without a key prop
+      const forPattern = /<For\s+each=\{[^}]+\}\s*>/g;
+      let match;
+      while ((match = forPattern.exec(code)) !== null) {
+        // Check if there's NO key= anywhere in the For tag
+        // Get the full tag (up to the closing >)
+        const tagStr = match[0];
+        if (!tagStr.includes('key=') && !tagStr.includes('key ')) {
+          const line = code.slice(0, match.index).split('\n').length;
+          issues.push({
+            severity: 'warning',
+            code: 'ERR_MISSING_KEY',
+            message: '<For> list rendered without a key prop. Add key={item => item.id} for efficient reordering.',
+            line,
+            suggestedFix: 'Add a key prop: <For each={items()} key={item => item.id}>',
+          });
+        }
+      }
+
+      // Also check mapArray without a key function (3rd arg)
+      const mapPattern = /mapArray\s*\(\s*[^,]+,\s*[^,)]+\s*\)/g;
+      while ((match = mapPattern.exec(code)) !== null) {
+        // mapArray(source, mapFn) — missing the 3rd arg (keyFn)
+        const line = code.slice(0, match.index).split('\n').length;
+        issues.push({
+          severity: 'warning',
+          code: 'ERR_MISSING_KEY',
+          message: 'mapArray() called without a key function (3rd argument). Add a key function for efficient list updates.',
+          line,
+          suggestedFix: 'Add a key function: mapArray(items, mapFn, item => item.id)',
+        });
+      }
+      return issues;
+    },
+  },
+  {
+    id: 'prefer-computed-over-effect',
+    code: 'HINT_PREFER_COMPUTED',
+    severity: 'info',
+    test(code) {
+      const issues = [];
+      // Find signal declarations
+      const signalDecls = [...code.matchAll(/(?:const|let)\s+(\w+)\s*=\s*(?:signal|useSignal)\s*\(/g)];
+      const signalNames = new Set(signalDecls.map(m => m[1]));
+
+      // Extract effect bodies using the same nested-brace approach as effect-writes-read-signal
+      const effectPattern = /effect\s*\(\s*\(\s*\)\s*=>\s*\{([^}]*(?:\{[^}]*\}[^}]*)*)\}/g;
+      let match;
+      while ((match = effectPattern.exec(code)) !== null) {
+        const body = match[1].trim();
+        // Check if body is a single signal write statement: signalName(expression);
+        const singleWrite = body.match(/^(\w+)\s*\([\s\S]+\)\s*;?\s*$/);
+        if (singleWrite) {
+          const writtenSignal = singleWrite[1];
+          if (writtenSignal && signalNames.has(writtenSignal)) {
+            const line = code.slice(0, match.index).split('\n').length;
+            issues.push({
+              severity: 'info',
+              code: 'HINT_PREFER_COMPUTED',
+              message: `Effect only writes to signal "${writtenSignal}". Consider using computed() instead for lazy evaluation.`,
+              line,
+              suggestedFix: `Replace with: const ${writtenSignal} = computed(() => /* your expression */);`,
+            });
+          }
+        }
+      }
+
+      // Also match arrow-expression form: effect(() => signalName(expression))
+      // Use a manual scan to handle nested parens
+      const arrowPattern = /effect\s*\(\s*\(\s*\)\s*=>\s*(\w+)\s*\(/g;
+      let arrowMatch;
+      while ((arrowMatch = arrowPattern.exec(code)) !== null) {
+        const writtenSignal = arrowMatch[1];
+        if (!signalNames.has(writtenSignal)) continue;
+        // Find the matching closing paren for the signal call, then for the effect call
+        const signalCallStart = arrowMatch.index + arrowMatch[0].length - 1; // position of '('
+        let depth = 1;
+        let i = signalCallStart + 1;
+        for (; i < code.length && depth > 0; i++) {
+          if (code[i] === '(') depth++;
+          if (code[i] === ')') depth--;
+        }
+        // After signal call closing paren, next char should be ')' (closing effect)
+        const afterSignalCall = code.slice(i).match(/^\s*\)/);
+        if (afterSignalCall) {
+          const line = code.slice(0, arrowMatch.index).split('\n').length;
+          issues.push({
+            severity: 'info',
+            code: 'HINT_PREFER_COMPUTED',
+            message: `Effect only writes to signal "${writtenSignal}". Consider using computed() instead for lazy evaluation.`,
+            line,
+            suggestedFix: `Replace with: const ${writtenSignal} = computed(() => /* your expression */);`,
+          });
+        }
+      }
+      return issues;
+    },
+  },
 ];
 
 // --- Scaffold Templates ---
@@ -318,6 +492,13 @@ export default ${name};
     const fields = signals.length > 0 ? signals : ['email', 'password'];
     const fieldDecls = fields.map(f => `    ${f}: { initial: '', rules: [rules.required('${f} is required')] },`).join('\n');
 
+    function inferInputType(fieldName) {
+      const lower = fieldName.toLowerCase();
+      if (lower === 'password' || lower === 'pass') return 'password';
+      if (lower === 'email') return 'email';
+      return 'text';
+    }
+
     return `import { signal } from 'what-framework';
 import { useForm, Input, ErrorMessage, rules } from 'what-framework';
 
@@ -335,7 +516,7 @@ ${fieldDecls}
     <form onsubmit={handleSubmit}>
 ${fields.map(f => `      <div>
         <label for="${f}">${f.charAt(0).toUpperCase() + f.slice(1)}</label>
-        <Input field={fields.${f}} id="${f}" type="text" />
+        <Input field={fields.${f}} id="${f}" type="${inferInputType(f)}" />
         <ErrorMessage field={fields.${f}} />
       </div>`).join('\n')}
       <button type="submit" disabled={isSubmitting()}>
@@ -460,7 +641,7 @@ export function registerAgentTools(server, bridge) {
     'Static analysis for What Framework code. Pass a code snippet, get back structured issues with fix suggestions. Works offline — no browser connection needed.',
     {
       code: z.string().describe('The What Framework code snippet to analyze'),
-      rules: z.array(z.string()).optional().describe('Specific rule IDs to run (default: all). Options: missing-signal-read, innerhtml-without-html, effect-writes-read-signal, missing-cleanup'),
+      rules: z.array(z.string()).optional().describe('Specific rule IDs to run (default: all). Options: missing-signal-read, innerhtml-without-html, effect-writes-read-signal, missing-cleanup, signal-write-in-render, missing-key-in-for, prefer-computed-over-effect'),
     },
     async ({ code, rules: ruleFilter }) => {
       let rulesToRun = LINT_RULES;