eslint-plugin-harlanzw 0.0.1 → 0.0.2

package/README.md

@@ -16,6 +16,12 @@ Harlan's ESLint rules for Vue projects.
 </table>
 </p>
 
+## Playground
+
+Try the rules in action with a Nuxt ESLint interactive playground:
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/harlan-zw/eslint-plugin-harlanzw/tree/main/playground)
+
 ## Rules
 
 > **Note:** These rules are experimental and may change. They will be submitted to the official Vue ESLint plugin for consideration.
@@ -64,6 +70,27 @@ export default antfu(
 )
 ```
 
+### With Nuxt ESLint
+
+```ts
+// eslint.config.mjs
+import harlanzw from 'eslint-plugin-harlanzw'
+import withNuxt from './.nuxt/eslint.config.mjs'
+
+export default withNuxt([{
+  plugins: {
+    harlanzw
+  },
+  rules: {
+    'harlanzw/vue-no-faux-composables': 'error',
+    'harlanzw/vue-no-nested-reactivity': 'error',
+    'harlanzw/vue-no-passing-refs-as-props': 'error',
+    'harlanzw/vue-no-ref-access-in-templates': 'error',
+    'harlanzw/vue-no-torefs-on-props': 'error'
+  }
+}])
+```
+
 ### Standalone Usage
 
 Add the plugin to your ESLint configuration:
@@ -71,9 +98,14 @@ Add the plugin to your ESLint configuration:
 ```js
 // eslint.config.js
 import harlanzw from 'eslint-plugin-harlanzw'
+import vueParser from 'vue-eslint-parser'
 
 export default [
   {
+    files: ['**/*.vue'],
+    languageOptions: {
+      parser: vueParser
+    },
     plugins: {
       harlanzw
     },
@@ -88,7 +120,6 @@ export default [
 ]
 ```
 
-
 ## Sponsors
 
 <p align="center">

package/dist/index.mjs

@@ -1,4 +1,4 @@
-const version = "0.0.0";
+const version = "0.0.1";
 
 const hasDocs = [
   "use-composables-must-use-reactivity",
@@ -409,7 +409,7 @@ const vueNoNestedReactivity = createEslintRule({
         }
       }
     }
-    return {
+    const scriptVisitor = {
       Program() {
         vueImports.clear();
         reactiveVariables.clear();
@@ -442,6 +442,20 @@ const vueNoNestedReactivity = createEslintRule({
         }
       }
     };
+    const templateVisitor = {
+      // Check for nested reactivity in Vue SFC templates
+      CallExpression(node) {
+        const reactiveType = isReactiveCall(node);
+        if (reactiveType) {
+          checkForNestedReactivity(node, reactiveType);
+        }
+        checkComputedCallback(node);
+      }
+    };
+    if (isVueParser(context)) {
+      return defineTemplateBodyVisitor(context, templateVisitor, scriptVisitor);
+    }
+    return scriptVisitor;
   }
 });
 
@@ -465,7 +479,19 @@ const vueNoPassingRefsAsProps = createEslintRule({
       const properties = refProperties.get(objectName);
       return properties?.has(propertyName) ?? false;
     }
-    return {
+    function checkMemberExpression(node) {
+      if (node.object.type === "Identifier" && node.property.type === "Identifier" && isRefProperty(node.object.name, node.property.name)) {
+        const parent = node.parent;
+        if (parent?.type === "MemberExpression" && parent.property.type === "Identifier" && parent.property.name === "value") {
+          return;
+        }
+        context.report({
+          node,
+          messageId: "noPassingRefsAsProps"
+        });
+      }
+    }
+    const scriptVisitor = {
       Program() {
         refProperties.clear();
       },
@@ -484,20 +510,20 @@ const vueNoPassingRefsAsProps = createEslintRule({
           }
         }
       },
-      // Check for ref property access in template expressions
+      // Check for ref property access in template strings (for non-SFC files)
       MemberExpression(node) {
-        if (isInVueTemplateString(node) && node.object.type === "Identifier" && node.property.type === "Identifier" && isRefProperty(node.object.name, node.property.name)) {
-          const parent = node.parent;
-          if (parent?.type === "MemberExpression" && parent.property.type === "Identifier" && parent.property.name === "value") {
-            return;
-          }
-          context.report({
-            node,
-            messageId: "noPassingRefsAsProps"
-          });
+        if (isInVueTemplateString(node)) {
+          checkMemberExpression(node);
         }
       }
     };
+    if (isVueParser(context)) {
+      return defineTemplateBodyVisitor(context, {
+        // Check for ref property access in Vue SFC templates
+        MemberExpression: checkMemberExpression
+      }, scriptVisitor);
+    }
+    return scriptVisitor;
   }
 });
 
@@ -645,7 +671,7 @@ const vueNoTorefsOnProps = createEslintRule({
         }
       }
     }
-    return {
+    const scriptVisitor = {
       Program() {
         propsVariables.clear();
       },
@@ -665,6 +691,14 @@ const vueNoTorefsOnProps = createEslintRule({
         checkToRefsCall(node);
       }
     };
+    const templateVisitor = {
+      // Check for toRefs calls in Vue SFC templates
+      CallExpression: checkToRefsCall
+    };
+    if (isVueParser(context)) {
+      return defineTemplateBodyVisitor(context, templateVisitor, scriptVisitor);
+    }
+    return scriptVisitor;
   }
 });
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "eslint-plugin-harlanzw",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Harlan's opinionated ESLint rules",
   "author": "Harlan Wilton <harlan@harlanzw.com>",
   "license": "MIT",