feat: forbid-attributes (#54)

* feat: forbid-attributes

* chore: little change

lib/index.js

@@ -4,6 +4,7 @@ module.exports = {
   rules: {
     "colon-style-event-binding": require("./rules/colon-style-event-binding"),
     "empty-tag-self-closing": require("./rules/empty-tag-self-closing"),
+    "forbid-attributes": require("./rules/forbid-attributes"),
     "forbid-tags": require("./rules/forbid-tags"),
     "max-depth": require("./rules/max-depth"),
     "max-len": require("./rules/max-len"),

lib/rules/forbid-attributes.js

@@ -0,0 +1,67 @@
+module.exports = {
+  /** @type {import('eslint').Rule.RuleMetaData} */
+  meta: {
+    type: "problem",
+    docs: {
+      description: "forbid using some attributes in producation code",
+      categories: [],
+      url: "https://eslint-plugin-wxml.js.org/rules/forbid-attributes.html",
+    },
+    fixable: null,
+    messages: {
+      forbiddenAttr: "wxml attribute {{attr}} is forbidden",
+      forbiddenAttrWithMessage: "{{message}}",
+    },
+    schema: [
+      {
+        type: "object",
+        properties: {
+          forbid: {
+            type: "array",
+            items: {
+              anyOf: [
+                { type: "string" },
+                {
+                  type: "object",
+                  properties: {
+                    attr: { type: "string" },
+                    message: { type: "string" },
+                  },
+                  required: ["attr"],
+                  additionalProperties: false,
+                },
+              ],
+            },
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+  },
+
+  /** @param {import('eslint').Rule.RuleContext} context */
+  create(context) {
+    const config = context.options[0] || [];
+    const forbidConfig = config.forbid || [];
+    const indexedForbidConfigs = {};
+    forbidConfig.forEach((item) => {
+      if (typeof item === "string") {
+        indexedForbidConfigs[item] = { attr: item };
+      } else {
+        indexedForbidConfigs[item.attr] = item;
+      }
+    });
+    return {
+      WXAttribute(node) {
+        if (node && node.key && indexedForbidConfigs[node.key]) {
+          const msg = indexedForbidConfigs[node.key].message;
+          context.report({
+            node: node,
+            messageId: msg ? "forbiddenAttrWithMessage" : "forbiddenAttr",
+            data: { attr: node.key, message: msg },
+          });
+        }
+      },
+    };
+  },
+};

tests/rules/forbid-attributes.js

@@ -0,0 +1,51 @@
+const RuleTester = require("eslint").RuleTester;
+const rule = require("../../lib/rules/forbid-attributes");
+
+const tester = new RuleTester({
+  parser: require.resolve("@wxml/parser"),
+});
+
+tester.run("forbid-attributes", rule, {
+  valid: [
+    {
+      code: `<span> html5 tag </span>`,
+      options: [],
+    },
+    {
+      code: `<view class="tag"></view>`,
+      options: [{ forbid: ["className"] }],
+    },
+    {
+      code: "<Button />",
+      options: [{ forbid: [{ attr: "button" }] }],
+    },
+  ],
+  invalid: [
+    {
+      code: "<button className='style' />",
+      options: [{ forbid: ["className"] }],
+      errors: [
+        {
+          messageId: "forbiddenAttr",
+          data: { attr: "className" },
+        },
+      ],
+    },
+    {
+      code: "<div className='style' />",
+      options: [
+        {
+          forbid: [
+            { attr: "className", message: "please use class instead" }
+          ],
+        },
+      ],
+      errors: [
+        {
+          messageId: "forbiddenAttrWithMessage",
+          data: { attr: "className", message: "please use class instead" },
+        },
+      ],
+    },
+  ],
+});

website/docs/rules/forbid-attributes.md

@@ -0,0 +1,62 @@
+---
+sidebarDepth: 0
+title: wxml/forbid-attributes
+---
+
+# wxml/forbid-attributes
+
+## Motivation
+
+Forbid using some attributes. For example: jsx use `className` but wxml use `class` as class name. So we can hint developer to chose right attribute when migrate from react project to wechat miniprogram.
+
+```js
+// following code use this config
+{
+  "wxml/forbid-attributes": [
+    "error",
+    {
+      "forbid":
+      [
+        {
+          "attr": "className",
+          "message": "wxml use class not jsx className"
+        }
+      ]
+    }
+  ]
+}
+```
+
+<eslint-code-block :rules="{'wxml/forbid-attributes': ['error', { forbid: [ { attr: 'fuck', message: 'dont use dirty words ' }, { attr: 'className', message: 'wxml use class as class name not jsx className' } ] }]}" >
+
+```wxml
+<!-- ✓ GOOD -->
+<text class="text-center" >{{name}}</div>
+
+<!-- ✗ BAD -->
+<text className="text-center" >{{name}}</div>
+<text fuck="true" >{{name}}</div>
+```
+
+</eslint-code-block>
+
+::: tip 💡 tips
+
+You can edit code via online editor, it's online REPL, try to fix eslint problem !
+
+:::
+
+## Config
+
+```typescript
+"wxml/forbid-attributes": [<enabled>, { "forbid": [<string|{ attr: string, message: string }>] }]
+```
+
+## Version
+
+This rule was introduced in eslint-plugin-wxml `v0.7.3`
+
+## Implementation
+
+- [Rule Source Code](https://github.com/wxmlfile/eslint-plugin-wxml/tree/main/lib/rules/forbid-attributes.js)
+- [Test Source Code](https://github.com/wxmlfile/eslint-plugin-wxml/tree/main/tests/rules/forbid-attributes.js)