@af-mobile/eslint-plugin 2.1.0 → 2.2.0

package/rules/wc-cleanup.js

@@ -1,75 +1,75 @@
-// L3-6 af-mobile/wc-cleanup（warn）
-// 检测两类资源泄漏（覆盖 src/components 与 src/blocks）：
-// 1) addEventListener 未通过 this._listen() 登记（传 signal 选项的原生自动解绑除外）
-//    —— 基类 disconnectedCallback 统一解绑 _listeners，绕过登记即泄漏
-// 2) IntersectionObserver/ResizeObserver/MutationObserver/setTimeout/setInterval/rAF
-//    在 unmounted() 中无对应清理调用
-const TIMERS = [
-  { name: 'setTimeout', cleanup: 'clearTimeout' },
-  { name: 'setInterval', cleanup: 'clearInterval' },
-  { name: 'requestAnimationFrame', cleanup: 'cancelAnimationFrame' },
-];
-const OBSERVERS = ['IntersectionObserver', 'ResizeObserver', 'MutationObserver'];
-
-export default {
-  meta: {
-    type: 'problem',
-    docs: { description: '组件资源清理：addEventListener 走 _listen，观察器/定时器在 unmounted() 清理' },
-    schema: [],
-    messages: {
-      listen: 'addEventListener 需通过 this._listen(target, type, handler) 登记，由基类在断开时统一解绑（AbortController 场景可传 { signal }）',
-      leak: '{{name}} 需在 unmounted() 中调用 {{cleanup}}，否则潜在内存泄漏',
-    },
-  },
-  create(context) {
-    const filename = context.filename || context.getFilename();
-    // 覆盖 src/components、src/blocks 与 charts 子库 src/charts/components
-    if (!/src[\\/](?:charts[\\/])?(?:components|blocks)[\\/].*\.js$/.test(filename)) return {};
-
-    const sourceCode = context.sourceCode || context.getSourceCode();
-    const leaks = []; // { node, name, cleanup }
-
-    const hasSignal = (args) => args.some((a) => a.type === 'ObjectExpression'
-      && a.properties.some((p) => p.key?.name === 'signal'));
-
-    return {
-      CallExpression(node) {
-        const callee = node.callee;
-        if (callee.type === 'MemberExpression' && callee.property?.name === 'addEventListener') {
-          if (!hasSignal(node.arguments)) context.report({ node, messageId: 'listen' });
-          return;
-        }
-        if (callee.type === 'Identifier') {
-          const p = TIMERS.find((t) => t.name === callee.name);
-          if (p) leaks.push({ node, name: p.name, cleanup: p.cleanup });
-        }
-      },
-      NewExpression(node) {
-        if (OBSERVERS.includes(node.callee?.name)) {
-          leaks.push({ node, name: node.callee.name, cleanup: 'disconnect' });
-        }
-      },
-      'Program:exit'() {
-        // 提取 unmounted() 方法体文本（括号计数，支持任意嵌套）
-        const source = sourceCode.getText();
-        let unmountedBody = '';
-        const startMatch = source.match(/unmounted\s*\(\s*\)\s*\{/);
-        if (startMatch) {
-          let depth = 1;
-          let i = startMatch.index + startMatch[0].length;
-          while (i < source.length && depth > 0) {
-            if (source[i] === '{') depth++;
-            else if (source[i] === '}') depth--;
-            if (depth > 0) unmountedBody += source[i];
-            i++;
-          }
-        }
-        for (const l of leaks) {
-          if (!unmountedBody.includes(l.cleanup)) {
-            context.report({ node: l.node, messageId: 'leak', data: { name: l.name, cleanup: l.cleanup } });
-          }
-        }
-      },
-    };
-  },
-};
+// L3-6 af-mobile/wc-cleanup（warn）
+// 检测两类资源泄漏（覆盖 src/components 与 src/blocks）：
+// 1) addEventListener 未通过 this._listen() 登记（传 signal 选项的原生自动解绑除外）
+//    —— 基类 disconnectedCallback 统一解绑 _listeners，绕过登记即泄漏
+// 2) IntersectionObserver/ResizeObserver/MutationObserver/setTimeout/setInterval/rAF
+//    在 unmounted() 中无对应清理调用
+const TIMERS = [
+  { name: 'setTimeout', cleanup: 'clearTimeout' },
+  { name: 'setInterval', cleanup: 'clearInterval' },
+  { name: 'requestAnimationFrame', cleanup: 'cancelAnimationFrame' },
+];
+const OBSERVERS = ['IntersectionObserver', 'ResizeObserver', 'MutationObserver'];
+
+export default {
+  meta: {
+    type: 'problem',
+    docs: { description: '组件资源清理：addEventListener 走 _listen，观察器/定时器在 unmounted() 清理' },
+    schema: [],
+    messages: {
+      listen: 'addEventListener 需通过 this._listen(target, type, handler) 登记，由基类在断开时统一解绑（AbortController 场景可传 { signal }）',
+      leak: '{{name}} 需在 unmounted() 中调用 {{cleanup}}，否则潜在内存泄漏',
+    },
+  },
+  create(context) {
+    const filename = context.filename || context.getFilename();
+    // 覆盖 src/components、src/blocks 与 charts 子库 src/charts/components
+    if (!/src[\\/](?:charts[\\/])?(?:components|blocks)[\\/].*\.js$/.test(filename)) return {};
+
+    const sourceCode = context.sourceCode || context.getSourceCode();
+    const leaks = []; // { node, name, cleanup }
+
+    const hasSignal = (args) => args.some((a) => a.type === 'ObjectExpression'
+      && a.properties.some((p) => p.key?.name === 'signal'));
+
+    return {
+      CallExpression(node) {
+        const callee = node.callee;
+        if (callee.type === 'MemberExpression' && callee.property?.name === 'addEventListener') {
+          if (!hasSignal(node.arguments)) context.report({ node, messageId: 'listen' });
+          return;
+        }
+        if (callee.type === 'Identifier') {
+          const p = TIMERS.find((t) => t.name === callee.name);
+          if (p) leaks.push({ node, name: p.name, cleanup: p.cleanup });
+        }
+      },
+      NewExpression(node) {
+        if (OBSERVERS.includes(node.callee?.name)) {
+          leaks.push({ node, name: node.callee.name, cleanup: 'disconnect' });
+        }
+      },
+      'Program:exit'() {
+        // 提取 unmounted() 方法体文本（括号计数，支持任意嵌套）
+        const source = sourceCode.getText();
+        let unmountedBody = '';
+        const startMatch = source.match(/unmounted\s*\(\s*\)\s*\{/);
+        if (startMatch) {
+          let depth = 1;
+          let i = startMatch.index + startMatch[0].length;
+          while (i < source.length && depth > 0) {
+            if (source[i] === '{') depth++;
+            else if (source[i] === '}') depth--;
+            if (depth > 0) unmountedBody += source[i];
+            i++;
+          }
+        }
+        for (const l of leaks) {
+          if (!unmountedBody.includes(l.cleanup)) {
+            context.report({ node: l.node, messageId: 'leak', data: { name: l.name, cleanup: l.cleanup } });
+          }
+        }
+      },
+    };
+  },
+};

package/rules/wc-event-naming.js

@@ -1,60 +1,60 @@
-// L3-4 af-mobile/wc-event-naming（error，可自动修）
-// 检测：emit('xxx') 调用名不匹配 /^af-[a-z0-9]+:[a-z]+$/
-const EVENT_RE = /^af-[a-z0-9-]+:[a-z]+$/;
-
-export default {
-  meta: {
-    type: 'problem',
-    docs: { description: '事件名必须匹配 af-{component}:{action} 格式' },
-    schema: [],
-    messages: {
-      naming: "Event name '{{name}}' should match 'af-{component}:{action}' (e.g. 'af-list:loadmore')",
-    },
-    fixable: 'code',
-  },
-  create(context) {
-    return {
-      CallExpression(node) {
-        // 检测 emit('xxx') 或 this.emit('xxx')
-        const callee = node.callee;
-        const isEmit = (callee.type === 'Identifier' && callee.name === 'emit') ||
-                       (callee.type === 'MemberExpression' && callee.property?.name === 'emit');
-        if (!isEmit) return;
-        const arg = node.arguments[0];
-        if (arg?.type !== 'Literal' || typeof arg.value !== 'string') return;
-        const name = arg.value;
-        if (EVENT_RE.test(name)) return;
-        // 自动修：尝试转换为 af-xxx:yyy 格式
-        let fixed = name;
-        // snake_case / camelCase → kebab + colon
-        fixed = fixed.replace(/_/g, '-')
-          .replace(/([a-z])([A-Z])/g, '$1-$2')
-          .toLowerCase();
-        // 如果不含冒号，尝试在组件名后插入冒号
-        if (!fixed.includes(':')) {
-          if (fixed.startsWith('af-')) {
-            // af-xxx-yyy → af-xxx:yyy（首个 - 起视为动作；动作段的 - 去除，保证 [a-z]+ 格式）
-            const rest = fixed.slice(3);
-            const dash = rest.indexOf('-');
-            if (dash > 0) {
-              fixed = `af-${rest.slice(0, dash)}:${rest.slice(dash + 1).replace(/-/g, '')}`;
-            } else {
-              fixed = 'af-component:' + rest;
-            }
-          } else {
-            // 无 af- 前缀，添加 af- 前缀 + 冒号
-            fixed = 'af-component:' + fixed.replace(/-/g, '');
-          }
-        }
-        context.report({
-          node: arg,
-          messageId: 'naming',
-          data: { name },
-          fix(fixer) {
-            return fixer.replaceText(arg, `'${fixed}'`);
-          },
-        });
-      },
-    };
-  },
-};
+// L3-4 af-mobile/wc-event-naming（error，可自动修）
+// 检测：emit('xxx') 调用名不匹配 /^af-[a-z0-9]+:[a-z]+$/
+const EVENT_RE = /^af-[a-z0-9-]+:[a-z]+$/;
+
+export default {
+  meta: {
+    type: 'problem',
+    docs: { description: '事件名必须匹配 af-{component}:{action} 格式' },
+    schema: [],
+    messages: {
+      naming: "Event name '{{name}}' should match 'af-{component}:{action}' (e.g. 'af-list:loadmore')",
+    },
+    fixable: 'code',
+  },
+  create(context) {
+    return {
+      CallExpression(node) {
+        // 检测 emit('xxx') 或 this.emit('xxx')
+        const callee = node.callee;
+        const isEmit = (callee.type === 'Identifier' && callee.name === 'emit') ||
+                       (callee.type === 'MemberExpression' && callee.property?.name === 'emit');
+        if (!isEmit) return;
+        const arg = node.arguments[0];
+        if (arg?.type !== 'Literal' || typeof arg.value !== 'string') return;
+        const name = arg.value;
+        if (EVENT_RE.test(name)) return;
+        // 自动修：尝试转换为 af-xxx:yyy 格式
+        let fixed = name;
+        // snake_case / camelCase → kebab + colon
+        fixed = fixed.replace(/_/g, '-')
+          .replace(/([a-z])([A-Z])/g, '$1-$2')
+          .toLowerCase();
+        // 如果不含冒号，尝试在组件名后插入冒号
+        if (!fixed.includes(':')) {
+          if (fixed.startsWith('af-')) {
+            // af-xxx-yyy → af-xxx:yyy（首个 - 起视为动作；动作段的 - 去除，保证 [a-z]+ 格式）
+            const rest = fixed.slice(3);
+            const dash = rest.indexOf('-');
+            if (dash > 0) {
+              fixed = `af-${rest.slice(0, dash)}:${rest.slice(dash + 1).replace(/-/g, '')}`;
+            } else {
+              fixed = 'af-component:' + rest;
+            }
+          } else {
+            // 无 af- 前缀，添加 af- 前缀 + 冒号
+            fixed = 'af-component:' + fixed.replace(/-/g, '');
+          }
+        }
+        context.report({
+          node: arg,
+          messageId: 'naming',
+          data: { name },
+          fix(fixer) {
+            return fixer.replaceText(arg, `'${fixed}'`);
+          },
+        });
+      },
+    };
+  },
+};

package/rules/wc-light-no-style.js

@@ -1,87 +1,87 @@
-// L3-1 af-mobile/wc-light-no-style（error）
-// 检测：Light 组件（useShadow=false）中 .style.xxx 赋值 / innerHTML 含 <style> 标签 / innerHTML 含 style="..." 属性
-export default {
-  meta: {
-    type: 'problem',
-    docs: { description: 'Light DOM 组件不能有内联样式，必须用 L2 class' },
-    schema: [],
-    messages: {
-      styleProp: "Light DOM component must use L2 recipe classes only. Custom styles → use Shadow component or recipes.project.css",
-      styleTag: "Light DOM component must not contain <style> tags. Move to Shadow component or recipes.project.css",
-      styleAttr: 'Light DOM component must not contain style="..." attributes in innerHTML. Use L2 recipe/atomic classes instead',
-    },
-  },
-  create(context) {
-    const filename = context.filename || context.getFilename();
-    // 仅检查 src/components/*.js 文件
-    if (!/src[\\/](?:charts[\\/])?components[\\/].*\.js$/.test(filename)) return {};
-
-    const sourceCode = context.sourceCode || context.getSourceCode();
-    const source = sourceCode.getText();
-    // 检测是否为 Light 组件（含 useShadow = false）
-    if (!/useShadow\s*=\s*false/.test(source)) return {};
-
-    // 检测 innerHTML / 模板字符串中的 style="..." 或 style='...' 属性
-    // 例外：style="--xxx:..."（CSS 自定义属性传递，非视觉属性，与 setProperty('--*') 同理）
-    const hasVisualStyleAttr = (str) => {
-      if (!str) return false;
-      // 匹配 style="..." 或 style='...'，且值非 -- 开头（CSS 自定义属性放行）
-      const re = /\bstyle=(["'])([^"']*)\1/gi;
-      let m;
-      while ((m = re.exec(str))) {
-        const val = m[2];
-        // CSS 自定义属性（--xxx）放行：用于主题变量传递
-        if (val.trim().startsWith('--')) continue;
-        // 任何非空 style 属性都违规（视觉属性）
-        if (val.trim()) return true;
-      }
-      return false;
-    };
-
-    return {
-      AssignmentExpression(node) {
-        // .style.xxx = 赋值
-        if (node.left?.type === 'MemberExpression' &&
-            node.left.object?.type === 'MemberExpression' &&
-            node.left.object.property?.name === 'style') {
-          context.report({ node, messageId: 'styleProp' });
-        }
-      },
-      CallExpression(node) {
-        // 检测 x.style.setProperty('prop', ...) 绕过：非 CSS 自定义属性（--*）的视觉属性
-        const callee = node.callee;
-        if (callee?.type !== 'MemberExpression') return;
-        if (callee.object?.type !== 'MemberExpression') return;
-        if (callee.object.property?.name !== 'style') return;
-        if (callee.property?.name !== 'setProperty') return;
-        const propArg = node.arguments?.[0];
-        if (!propArg || propArg.type !== 'Literal' || typeof propArg.value !== 'string') return;
-        // CSS 自定义属性（--*）允许：用于主题变量传递，非视觉属性
-        if (propArg.value.startsWith('--')) return;
-        context.report({ node, messageId: 'styleProp' });
-      },
-      Literal(node) {
-        if (typeof node.value !== 'string') return;
-        // <style> 标签
-        if (/<style[\s>]/i.test(node.value)) {
-          context.report({ node, messageId: 'styleTag' });
-        }
-        // style="..." 属性（视觉属性）
-        if (hasVisualStyleAttr(node.value)) {
-          context.report({ node, messageId: 'styleAttr' });
-        }
-      },
-      TemplateElement(node) {
-        if (!node.value?.raw) return;
-        // <style> 标签
-        if (/<style[\s>]/i.test(node.value.raw)) {
-          context.report({ node, messageId: 'styleTag' });
-        }
-        // style="..." 属性（视觉属性）
-        if (hasVisualStyleAttr(node.value.raw)) {
-          context.report({ node, messageId: 'styleAttr' });
-        }
-      },
-    };
-  },
-};
+// L3-1 af-mobile/wc-light-no-style（error）
+// 检测：Light 组件（useShadow=false）中 .style.xxx 赋值 / innerHTML 含 <style> 标签 / innerHTML 含 style="..." 属性
+export default {
+  meta: {
+    type: 'problem',
+    docs: { description: 'Light DOM 组件不能有内联样式，必须用 L2 class' },
+    schema: [],
+    messages: {
+      styleProp: "Light DOM component must use L2 recipe classes only. Custom styles → use Shadow component or recipes.project.css",
+      styleTag: "Light DOM component must not contain <style> tags. Move to Shadow component or recipes.project.css",
+      styleAttr: 'Light DOM component must not contain style="..." attributes in innerHTML. Use L2 recipe/atomic classes instead',
+    },
+  },
+  create(context) {
+    const filename = context.filename || context.getFilename();
+    // 仅检查 src/components/*.js 文件
+    if (!/src[\\/](?:charts[\\/])?components[\\/].*\.js$/.test(filename)) return {};
+
+    const sourceCode = context.sourceCode || context.getSourceCode();
+    const source = sourceCode.getText();
+    // 检测是否为 Light 组件（含 useShadow = false）
+    if (!/useShadow\s*=\s*false/.test(source)) return {};
+
+    // 检测 innerHTML / 模板字符串中的 style="..." 或 style='...' 属性
+    // 例外：style="--xxx:..."（CSS 自定义属性传递，非视觉属性，与 setProperty('--*') 同理）
+    const hasVisualStyleAttr = (str) => {
+      if (!str) return false;
+      // 匹配 style="..." 或 style='...'，且值非 -- 开头（CSS 自定义属性放行）
+      const re = /\bstyle=(["'])([^"']*)\1/gi;
+      let m;
+      while ((m = re.exec(str))) {
+        const val = m[2];
+        // CSS 自定义属性（--xxx）放行：用于主题变量传递
+        if (val.trim().startsWith('--')) continue;
+        // 任何非空 style 属性都违规（视觉属性）
+        if (val.trim()) return true;
+      }
+      return false;
+    };
+
+    return {
+      AssignmentExpression(node) {
+        // .style.xxx = 赋值
+        if (node.left?.type === 'MemberExpression' &&
+            node.left.object?.type === 'MemberExpression' &&
+            node.left.object.property?.name === 'style') {
+          context.report({ node, messageId: 'styleProp' });
+        }
+      },
+      CallExpression(node) {
+        // 检测 x.style.setProperty('prop', ...) 绕过：非 CSS 自定义属性（--*）的视觉属性
+        const callee = node.callee;
+        if (callee?.type !== 'MemberExpression') return;
+        if (callee.object?.type !== 'MemberExpression') return;
+        if (callee.object.property?.name !== 'style') return;
+        if (callee.property?.name !== 'setProperty') return;
+        const propArg = node.arguments?.[0];
+        if (!propArg || propArg.type !== 'Literal' || typeof propArg.value !== 'string') return;
+        // CSS 自定义属性（--*）允许：用于主题变量传递，非视觉属性
+        if (propArg.value.startsWith('--')) return;
+        context.report({ node, messageId: 'styleProp' });
+      },
+      Literal(node) {
+        if (typeof node.value !== 'string') return;
+        // <style> 标签
+        if (/<style[\s>]/i.test(node.value)) {
+          context.report({ node, messageId: 'styleTag' });
+        }
+        // style="..." 属性（视觉属性）
+        if (hasVisualStyleAttr(node.value)) {
+          context.report({ node, messageId: 'styleAttr' });
+        }
+      },
+      TemplateElement(node) {
+        if (!node.value?.raw) return;
+        // <style> 标签
+        if (/<style[\s>]/i.test(node.value.raw)) {
+          context.report({ node, messageId: 'styleTag' });
+        }
+        // style="..." 属性（视觉属性）
+        if (hasVisualStyleAttr(node.value.raw)) {
+          context.report({ node, messageId: 'styleAttr' });
+        }
+      },
+    };
+  },
+};

package/rules/wc-part-naming.js

@@ -1,33 +1,33 @@
-// L3-3 af-mobile/wc-part-naming（warn）
-// 检测：part="xxx" 属性名非 kebab-case
-const KEBAB_RE = /^[a-z]+(-[a-z0-9]+)*$/;
-
-export default {
-  meta: {
-    type: 'suggestion',
-    docs: { description: 'part 属性名必须 kebab-case' },
-    schema: [],
-    messages: {
-      naming: "Part name '{{name}}' should be kebab-case (e.g. 'dialog-content')",
-    },
-  },
-  create(context) {
-    const filename = context.filename || context.getFilename();
-    if (!/src[\\/](?:charts[\\/])?components[\\/].*\.js$/.test(filename)) return {};
-
-    function checkString(str, node) {
-      const re = /part\s*=\s*"([^"]*)"/g;
-      let m;
-      while ((m = re.exec(str))) {
-        const partName = m[1].trim();
-        if (partName && !KEBAB_RE.test(partName)) {
-          context.report({ node, messageId: 'naming', data: { name: partName } });
-        }
-      }
-    }
-    return {
-      Literal(node) { if (typeof node.value === 'string') checkString(node.value, node); },
-      TemplateElement(node) { if (node.value?.raw) checkString(node.value.raw, node); },
-    };
-  },
-};
+// L3-3 af-mobile/wc-part-naming（warn）
+// 检测：part="xxx" 属性名非 kebab-case
+const KEBAB_RE = /^[a-z]+(-[a-z0-9]+)*$/;
+
+export default {
+  meta: {
+    type: 'suggestion',
+    docs: { description: 'part 属性名必须 kebab-case' },
+    schema: [],
+    messages: {
+      naming: "Part name '{{name}}' should be kebab-case (e.g. 'dialog-content')",
+    },
+  },
+  create(context) {
+    const filename = context.filename || context.getFilename();
+    if (!/src[\\/](?:charts[\\/])?components[\\/].*\.js$/.test(filename)) return {};
+
+    function checkString(str, node) {
+      const re = /part\s*=\s*"([^"]*)"/g;
+      let m;
+      while ((m = re.exec(str))) {
+        const partName = m[1].trim();
+        if (partName && !KEBAB_RE.test(partName)) {
+          context.report({ node, messageId: 'naming', data: { name: partName } });
+        }
+      }
+    }
+    return {
+      Literal(node) { if (typeof node.value === 'string') checkString(node.value, node); },
+      TemplateElement(node) { if (node.value?.raw) checkString(node.value.raw, node); },
+    };
+  },
+};