@brighterly/lib-fe-codestyle 1.0.1 → 1.0.2

package/dist/engine/ast.d.ts

@@ -22,6 +22,14 @@ export declare const findJsonParseCalls: (file: string, source: string) => Promi
     line: number;
     guarded: boolean;
 }[]>;
+/**
+ * The 1-based lines of a file that run inside a component lifetime: the body of a `<script setup>`
+ * block, and the body of any function named `use…` (a composable) or `setup` (Options API /
+ * `defineComponent`), including everything nested inside them. A store action, a plugin, a plain
+ * helper or module-level code is outside: VueUse's automatic cleanup has no scope to attach to there,
+ * so a rule that recommends a VueUse composable must stay silent on those lines.
+ */
+export declare const componentScopeLines: (file: string, source: string) => Promise<Set<number>>;
 /**
  * Every static import that survives compilation: default, named, namespace and bare side-effect
  * imports plus `export … from` re-exports, in .ts files and in every script block of a .vue file.

package/dist/engine/ast.js

@@ -83,6 +83,57 @@ export const findJsonParseCalls = async (file, source) => {
     }
     return out;
 };
+/**
+ * The 1-based lines of a file that run inside a component lifetime: the body of a `<script setup>`
+ * block, and the body of any function named `use…` (a composable) or `setup` (Options API /
+ * `defineComponent`), including everything nested inside them. A store action, a plugin, a plain
+ * helper or module-level code is outside: VueUse's automatic cleanup has no scope to attach to there,
+ * so a rule that recommends a VueUse composable must stay silent on those lines.
+ */
+export const componentScopeLines = async (file, source) => {
+    const t = await ts();
+    const lines = new Set();
+    const add = (from, to) => { for (let l = from; l <= to; l++)
+        lines.add(l); };
+    if (file.endsWith('.vue')) {
+        const re = /<script\b([^>]*)>([\s\S]*?)<\/script>/g;
+        let m;
+        while ((m = re.exec(source)) !== null) {
+            if (!/\bsetup\b/.test(m[1] ?? '') || m[2] === undefined)
+                continue;
+            const bodyStart = m.index + m[0].length - m[2].length - '</script>'.length;
+            const first = source.slice(0, bodyStart).split('\n').length;
+            add(first, first + m[2].split('\n').length - 1);
+        }
+    }
+    const SCOPED = /^(?:use[A-Z0-9]|setup$)/;
+    const nameOf = (node) => {
+        if ((t.isFunctionDeclaration(node) || t.isMethodDeclaration(node) || t.isFunctionExpression(node)) && node.name && t.isIdentifier(node.name))
+            return node.name.text;
+        const parent = node.parent;
+        if (!parent)
+            return null;
+        if (t.isVariableDeclaration(parent) && t.isIdentifier(parent.name))
+            return parent.name.text;
+        if (t.isPropertyAssignment(parent) && (t.isIdentifier(parent.name) || t.isStringLiteral(parent.name)))
+            return parent.name.text;
+        return null;
+    };
+    for (const script of scriptsOf(file, source)) {
+        const sf = t.createSourceFile(file, script.code, t.ScriptTarget.Latest, true);
+        const lineOf = (pos) => sf.getLineAndCharacterOfPosition(pos).line + 1 + script.lineOffset;
+        const visit = (node) => {
+            const isFn = t.isFunctionDeclaration(node) || t.isFunctionExpression(node) || t.isArrowFunction(node) || t.isMethodDeclaration(node);
+            if (isFn && SCOPED.test(nameOf(node) ?? '')) {
+                add(lineOf(node.getStart(sf)), lineOf(node.getEnd()));
+                return;
+            }
+            t.forEachChild(node, visit);
+        };
+        visit(sf);
+    }
+    return lines;
+};
 /**
  * Every static import that survives compilation: default, named, namespace and bare side-effect
  * imports plus `export … from` re-exports, in .ts files and in every script block of a .vue file.

package/dist/rules/convention.js

@@ -16,6 +16,7 @@
  * They ship at `warn` so each consuming app can measure what they find before anyone
  * decides to block on them. Promoting one to `error` is a major version bump.
  */
+import { componentScopeLines } from '../engine/ast.js';
 import { eachLine, setting } from './shared.js';
 const vueUseFirst = {
     name: 'vueuse-first',
@@ -25,12 +26,22 @@ const vueUseFirst = {
     fix: 'use the VueUse composable named in the message, imported explicitly from @vueuse/core',
     scope: ['app/**/*.{ts,vue}'],
     exclude: ['app/tests/**', 'app/test/**'],
-    fixtures: {
-        file: 'app/a.ts',
-        bad: 'window.addEventListener("resize", onResize)',
-        good: 'useEventListener(window, "resize", onResize)',
-    },
-    check: ({ file, code }) => {
+    async: true,
+    // Only lines inside a component lifetime count (`<script setup>`, a `use…` composable, a `setup()`
+    // method). A store action, a plugin or a plain helper has no effect scope, so the VueUse composable
+    // the message recommends would leak there — those lines are silent by construction.
+    fixtures: [
+        { file: 'app/composables/a.ts', bad: 'export const useA = () => {\n  window.addEventListener("resize", onResize)\n}', good: 'export const useA = () => {\n  useEventListener(window, "resize", onResize)\n}' },
+        { file: 'app/composables/b.ts', bad: 'export function useB() {\n  const run = () => setTimeout(tick, 10)\n  return { run }\n}' },
+        { file: 'app/components/A.vue', bad: '<script setup lang="ts">\nsetTimeout(tick, 10)\n</script>', good: '<script setup lang="ts">\nuseTimeoutFn(tick, 10)\n</script>' },
+        { file: 'app/components/B.vue', bad: '<script lang="ts">\nexport default defineComponent({\n  setup() {\n    setInterval(tick, 10)\n  },\n})\n</script>' },
+        { file: 'app/stores/quiz/actions.ts', good: 'export const actions = {\n  setLazyStep(payload) {\n    setTimeout(() => setStep(payload), 300)\n  },\n}' },
+        { file: 'app/composables/tools/scroll.ts', good: 'export const scrollIntoViewIfHidden = (el) => {\n  new IntersectionObserver(cb).observe(el)\n}' },
+        { file: 'app/composables/tools/sdk.ts', good: 'const init = () => {\n  load().catch(() => setTimeout(init, 800))\n}' },
+        { file: 'app/plugins/axios.client.ts', good: 'export default defineNuxtPlugin(() => {\n  setTimeout(refresh, 1000)\n})' },
+    ],
+    check: async ({ file, source, code }) => {
+        const scoped = await componentScopeLines(file, source);
         const map = [
             [/new\s+IntersectionObserver\s*\(/, 'useIntersectionObserver'],
             [/new\s+ResizeObserver\s*\(/, 'useResizeObserver'],
@@ -45,6 +56,8 @@ const vueUseFirst = {
             [/\b(?:window\s*\.\s*)?setTimeout\s*\(/, 'useTimeoutFn'],
         ];
         return eachLine(code, (line, n) => {
+            if (!scoped.has(n))
+                return null;
             for (const [re, fn] of map) {
                 if (re.test(line))
                     return { file, line: n, message: `hand-rolled browser API — use ${fn} from @vueuse/core` };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brighterly/lib-fe-codestyle",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "type": "module",
   "license": "UNLICENSED",
   "description": "Shared invariant-validator engine, rule pack and ESLint config for Brighterly Nuxt frontend apps",