@ethlete/eslint-plugin 1.0.0-next.24 → 1.0.0-next.26

package/src/rules/no-angular-router-api.js

@@ -47,7 +47,6 @@ const ROUTER_STATE_PROPS = new Map([
   ['url', "injectUrl() from '@ethlete/core'"],
   ['events', "injectRouterEvent() from '@ethlete/core'"],
   ['routerState', "injectRouterState() from '@ethlete/core'"],
-  ['snapshot', "injectRouterState() from '@ethlete/core'"],
   ['lastSuccessfulNavigation', "injectRouterState() from '@ethlete/core'"],
   ['currentNavigation', "injectRouterState() from '@ethlete/core'"],
 ]);
@@ -81,47 +80,103 @@ const noAngularRouterApi = {
       isImportedAs(sourceCode, call.callee, 'inject') &&
       isImportedAs(sourceCode, call.arguments[0], token, ANGULAR_ROUTER);
 
+    /** @type {WeakMap<any, Set<string>>} */
+    const classRouterMembers = new WeakMap();
+
     /**
-     * Names of variables/properties assigned from inject(Router).
-     * We track identifiers whose initializer is inject(Router) so we can
-     * detect property access on them anywhere in the file.
-     * @type {Set<string>}
+     * @param {any} classBody
      */
-    const routerBindings = new Set();
+    const getClassRouterMembers = (classBody) => {
+      let members = classRouterMembers.get(classBody);
 
-    return {
-      // ── Track inject(Router) bindings ──────────────────────────────────────
-      // const router = inject(Router);
-      VariableDeclarator(node) {
-        if (isInjectOf(node.init, 'Router') && node.id.type === 'Identifier') {
-          routerBindings.add(node.id.name);
+      if (!members) {
+        members = new Set();
+
+        for (const member of classBody.body) {
+          if (member.type === 'PropertyDefinition' && member.key.type === 'Identifier' && !member.computed) {
+            if (isInjectOf(member.value, 'Router')) members.add(member.key.name);
+          }
         }
-      },
 
-      // ── Track class property assignments: router = inject(Router) ──────────
-      PropertyDefinition(node) {
-        if (isInjectOf(node.value, 'Router') && node.key.type === 'Identifier') {
-          routerBindings.add(node.key.name);
+        classRouterMembers.set(classBody, members);
+      }
+
+      return members;
+    };
+
+    /**
+     * @param {any} thisExpression
+     */
+    const getThisClassBody = (thisExpression) => {
+      let current = thisExpression.parent;
+
+      while (current) {
+        if (current.type === 'ClassBody') return current;
+
+        if (current.type === 'FunctionExpression' || current.type === 'FunctionDeclaration') {
+          const parent = current.parent;
+          const isMember = parent?.type === 'MethodDefinition' || parent?.type === 'PropertyDefinition';
+          if (!isMember) return null;
         }
-      },
 
-      // ── Detect router.{stateProp} access ───────────────────────────────────
+        current = current.parent;
+      }
+
+      return null;
+    };
+
+    /**
+     * @param {any} identifier
+     */
+    const isRouterVariable = (identifier) => {
+      /** @type {import('eslint').Scope.Scope | null} */
+      let scope = sourceCode.getScope(identifier);
+
+      while (scope) {
+        const variable = scope.set.get(identifier.name);
+
+        if (variable) {
+          const definition = /** @type {any} */ (variable.defs[0]);
+
+          return (
+            definition?.type === 'Variable' &&
+            definition.node.id.type === 'Identifier' &&
+            isInjectOf(definition.node.init, 'Router')
+          );
+        }
+
+        scope = scope.upper;
+      }
+
+      return false;
+    };
+
+    /**
+     * @param {any} object
+     */
+    const isRouterReference = (object) => {
+      if (object.type === 'Identifier') return isRouterVariable(object);
+
+      if (
+        object.type !== 'MemberExpression' ||
+        object.computed ||
+        object.object.type !== 'ThisExpression' ||
+        object.property.type !== 'Identifier'
+      ) {
+        return false;
+      }
+
+      const classBody = getThisClassBody(object.object);
+
+      return !!classBody && getClassRouterMembers(classBody).has(object.property.name);
+    };
+
+    return {
       MemberExpression(node) {
         if (node.property.type !== 'Identifier') return;
         const prop = node.property.name;
         if (!ROUTER_STATE_PROPS.has(prop)) return;
-
-        // Check object is a known router binding (direct: router.url)
-        // or a this.router.url / self.router.url pattern
-        const obj = node.object;
-        const isDirectBinding = obj.type === 'Identifier' && routerBindings.has(obj.name);
-        const isThisBinding =
-          obj.type === 'MemberExpression' &&
-          obj.object.type === 'ThisExpression' &&
-          obj.property.type === 'Identifier' &&
-          routerBindings.has(obj.property.name);
-
-        if (!isDirectBinding && !isThisBinding) return;
+        if (!isRouterReference(node.object)) return;
 
         context.report({
           node,
@@ -130,7 +185,6 @@ const noAngularRouterApi = {
         });
       },
 
-      // ── ActivatedRoute import ───────────────────────────────────────────────
       [MODULE_REFERENCE_SELECTOR](node) {
         const reference = getModuleReference(node);
         if (reference?.source !== ANGULAR_ROUTER) return;
@@ -139,7 +193,6 @@ const noAngularRouterApi = {
         }
       },
 
-      // ── inject(ActivatedRoute) ──────────────────────────────────────────────
       CallExpression(node) {
         if (isInjectOf(node, 'ActivatedRoute')) {
           context.report({ node, messageId: 'noActivatedRoute' });

package/src/rules/no-angular-seo-services.js

@@ -36,6 +36,7 @@ const rule = {
     type: 'suggestion',
     docs: {
       description: "Disallow Angular's Title/Meta services. Use @ethlete/core SEO utilities instead.",
+      recommended: true,
     },
     schema: [],
     messages: {

package/src/rules/no-async-await.js

@@ -19,7 +19,7 @@
  *   }
  */
 
-/** Storybook's play function is called by the test runner and has to be a promise. */
+/** Storybook's play function is called by the test runner and has to be a promise; only exempt in story files. */
 const isStorybookPlayFunction = (node) => {
   const { parent } = node;
 
@@ -49,7 +49,11 @@ const noAsyncAwait = {
     schema: [],
   },
   create(context) {
+    const isStoryFile = /\.stories\.[cm]?[jt]sx?$/.test(context.filename);
+
     const isExempt = (node) => {
+      if (!isStoryFile) return false;
+
       for (let current = node; current; current = current.parent) {
         if (isStorybookPlayFunction(current)) return true;
       }

package/src/rules/no-cdk-import.js

@@ -26,17 +26,33 @@ const CDK_PACKAGE = '@ethlete/cdk';
 const MIGRATION_MAP = '@ethlete/cdk/migration-map.json';
 const DEFAULT_DOCS_BASE_URL = 'https://ethlete-sdk-docs.web.app';
 
-/** @type {Map<string, Record<string, { kind: string, to?: string, package?: string, docs?: string, note?: string }> | null>} */
+/** @typedef {Record<string, { kind: string, to?: string, package?: string, docs?: string, note?: string }>} TMigrationMap */
+
+/** @type {Map<string, { mtimeMs: number | null, map: TMigrationMap }>} */
 const mapCache = new Map();
 
+/**
+ * @param {string} path
+ */
+const getMtimeMs = (path) => {
+  try {
+    return fs.statSync(path).mtimeMs;
+  } catch {
+    return null;
+  }
+};
+
 /**
  * @param {string | undefined} mapPath
  * @param {string} cwd
+ * @returns {TMigrationMap | null}
  */
 const loadMigrationMap = (mapPath, cwd) => {
-  const cacheKey = mapPath ? path.resolve(cwd, mapPath) : MIGRATION_MAP;
+  const cacheKey = mapPath ? path.resolve(cwd, mapPath) : `${cwd}:${MIGRATION_MAP}`;
+  const mtimeMs = mapPath ? getMtimeMs(cacheKey) : null;
+  const cached = mapCache.get(cacheKey);
 
-  if (mapCache.has(cacheKey)) return mapCache.get(cacheKey) ?? null;
+  if (cached && cached.mtimeMs === mtimeMs) return cached.map;
 
   let map;
 
@@ -45,14 +61,23 @@ const loadMigrationMap = (mapPath, cwd) => {
       ? JSON.parse(fs.readFileSync(cacheKey, 'utf8'))
       : createRequire(path.join(cwd, 'noop.js'))(MIGRATION_MAP);
   } catch {
-    map = null;
+    return null;
   }
 
-  mapCache.set(cacheKey, map);
+  mapCache.set(cacheKey, { mtimeMs, map });
 
   return map;
 };
 
+/**
+ * @param {string} note
+ */
+const formatNote = (note) => {
+  const sentence = note.charAt(0).toUpperCase() + note.slice(1);
+
+  return /[.!?]$/u.test(sentence) ? sentence : `${sentence}.`;
+};
+
 /** @type {import('eslint').Rule.RuleModule} */
 const noCdkImport = {
   meta: {
@@ -86,7 +111,7 @@ const noCdkImport = {
     const map = loadMigrationMap(options.migrationMapPath, context.cwd);
 
     /** @param {string} name */
-    const entryFor = (name) => map?.[name] ?? null;
+    const entryFor = (name) => (map && Object.hasOwn(map, name) ? map[name] : null);
 
     return {
       [MODULE_REFERENCE_SELECTOR](node) {
@@ -135,7 +160,7 @@ const noCdkImport = {
               to: entry.to,
               package: entry.package ?? '@ethlete/components',
               docs: entry.docs ? `${docsBaseUrl}${entry.docs}` : migrationDocs,
-              note: entry.note ? ` ${entry.note}.` : '',
+              note: entry.note ? ` ${formatNote(entry.note)}` : '',
             },
           });
         }

package/src/rules/no-csp-unsafe.js

@@ -0,0 +1,362 @@
+// @ts-check
+'use strict';
+
+/**
+ * Disallows code that a strict Content Security Policy without `'unsafe-inline'` / `'unsafe-eval'`
+ * blocks at runtime:
+ *
+ *   script-src 'self' 'nonce-…'; style-src 'self' 'nonce-…'
+ *
+ * BAD:
+ *   el.setAttribute('style', 'color: red');          // inline style attribute
+ *   renderer.setAttribute(el, 'style', css);
+ *   const s = document.createElement('style');       // appended without a nonce
+ *   eval(code); new Function(code); setTimeout('tick()', 10);
+ *   `<div style="color: red">…</div>`                // HTML string parsed into the DOM
+ *   <div style="color: red"></div>                   // static template attribute
+ *   host: { style: 'display: block' }
+ *
+ * GOOD:
+ *   el.style.color = 'red';  el.style.setProperty('--x', '1');  [style.color]="c"
+ *   s.setAttribute('nonce', inject(CSP_NONCE));      // or s.nonce = …
+ *   a class or data attribute styled by a shipped stylesheet
+ *
+ * In an Angular template this rule runs on `.html` files and on inline templates extracted by
+ * `processInlineTemplates`; in TypeScript it skips a decorator's `template` string for that reason.
+ */
+
+const fs = require('node:fs');
+const { isGlobalReference } = require('./internals/import-resolution');
+
+const NONCED_ELEMENTS = new Set(['script', 'style']);
+const TIMER_FUNCTIONS = new Set(['setTimeout', 'setInterval']);
+const HTML_STYLE_ATTRIBUTE = /<[a-zA-Z][^<>]*\sstyle\s*=/;
+const UNFIXABLE_STYLE_VALUE = /['"\\]|\/\*|!important|url\(/i;
+const PLAIN_STYLE_PROPERTY = /^[a-zA-Z]+$/;
+const STYLE_PROPERTY = /^-{0,2}[a-zA-Z][\w-]*$/;
+const QUOTED_INLINE_TEMPLATE = /\btemplate\s*:\s*['"]/;
+
+/**
+ * Turns `a: b; c-d: e` into `{ a: 'b', 'c-d': 'e' }`, or returns null when the declarations cannot be
+ * rewritten without changing what they mean.
+ *
+ * @param {string} css
+ */
+const toStyleObjectLiteral = (css) => {
+  if (UNFIXABLE_STYLE_VALUE.test(css)) return null;
+
+  const entries = [];
+
+  for (const declaration of css.split(';')) {
+    if (!declaration.trim()) continue;
+
+    const colon = declaration.indexOf(':');
+
+    if (colon === -1) return null;
+
+    const property = declaration.slice(0, colon).trim();
+    const value = declaration
+      .slice(colon + 1)
+      .trim()
+      .replace(/\s+/g, ' ');
+
+    if (!STYLE_PROPERTY.test(property) || !value) return null;
+
+    entries.push(`${PLAIN_STYLE_PROPERTY.test(property) ? property : `'${property}'`}: '${value}'`);
+  }
+
+  return entries.length ? `{ ${entries.join(', ')} }` : null;
+};
+
+/** @param {any} node */
+const stringValue = (node) => (node?.type === 'Literal' && typeof node.value === 'string' ? node.value : null);
+
+/** @param {any} node */
+const propertyName = (node) => {
+  if (node?.type !== 'Property' || node.computed) return null;
+  if (node.key.type === 'Identifier') return node.key.name;
+
+  return stringValue(node.key);
+};
+
+/** @param {any} node */
+const calleeMemberName = (node) =>
+  node.callee.type === 'MemberExpression' && !node.callee.computed && node.callee.property.type === 'Identifier'
+    ? node.callee.property.name
+    : null;
+
+/** @param {any} node @param {string} name */
+const hasProperty = (node, name) =>
+  node?.type === 'ObjectExpression' && node.properties.some(/** @param {any} p */ (p) => propertyName(p) === name);
+
+/** @param {any} node */
+const isDecoratorTemplate = (node) => {
+  const property = node.parent;
+
+  if (propertyName(property) !== 'template' || property.value !== node) return false;
+
+  const call = property.parent?.parent;
+
+  return call?.type === 'CallExpression' && call.parent?.type === 'Decorator';
+};
+
+/** @param {any} node */
+const isHostMetadata = (node) => {
+  const property = node.parent;
+
+  if (propertyName(property) !== 'host' || property.value !== node) return false;
+
+  const call = property.parent?.parent;
+
+  return call?.type === 'CallExpression' && call.parent?.type === 'Decorator';
+};
+
+/** @param {any} node */
+const enclosingScopeNode = (node) => {
+  let current = node.parent;
+
+  while (current) {
+    if (
+      current.type === 'FunctionDeclaration' ||
+      current.type === 'FunctionExpression' ||
+      current.type === 'ArrowFunctionExpression' ||
+      current.type === 'Program'
+    ) {
+      return current;
+    }
+
+    current = current.parent;
+  }
+
+  return null;
+};
+
+/** @param {any} node */
+const boundTarget = (node) => {
+  const parent = node.parent;
+
+  if (parent?.type === 'VariableDeclarator' && parent.init === node && parent.id.type === 'Identifier')
+    return parent.id;
+  if (parent?.type === 'AssignmentExpression' && parent.right === node) return parent.left;
+
+  return null;
+};
+
+/** @type {import('eslint').Rule.RuleModule} */
+const noCspUnsafe = {
+  meta: {
+    type: 'problem',
+    fixable: 'code',
+    docs: {
+      description:
+        "Disallow code a strict Content Security Policy (no 'unsafe-inline', no 'unsafe-eval') blocks at runtime.",
+      recommended: true,
+    },
+    schema: [],
+    messages: {
+      styleAttribute:
+        "A `style` attribute is blocked by a CSP without 'unsafe-inline'. Set styles through CSSOM (`el.style.x = …`, `style.setProperty()`, a `[style.x]` binding) or use a class.",
+      htmlStyleAttribute:
+        "This HTML string sets a `style` attribute, which a CSP without 'unsafe-inline' blocks once it is parsed into the DOM. Use a class or a data attribute styled by a stylesheet.",
+      templateStyleAttribute:
+        "A static `style` attribute is blocked by a CSP without 'unsafe-inline'. Use `[style.x]` bindings or a class.",
+      missingNonce:
+        "A `<{{tag}}>` element created without a nonce is blocked by a CSP without 'unsafe-inline'. Set `nonce` from `inject(CSP_NONCE)` on it in the same function.",
+      dynamicCode: "`{{name}}` evaluates a string as code, which a CSP without 'unsafe-eval' blocks.",
+    },
+  },
+  create(context) {
+    const sourceCode = context.sourceCode;
+    const parserServices = /** @type {any} */ (sourceCode.parserServices);
+
+    if (parserServices?.convertNodeSourceSpanToLoc) {
+      /** @param {any} span @param {string} messageId */
+      const reportSpan = (span, messageId) =>
+        context.report({ loc: parserServices.convertNodeSourceSpanToLoc(span), messageId });
+
+      let quotedInlineTemplate = /** @type {boolean | undefined} */ (undefined);
+
+      // The fix writes single quotes, which would end a quoted `template: '…'` string in the component.
+      const canFixTemplate = () => {
+        if (context.physicalFilename === context.filename || !context.physicalFilename.endsWith('.ts')) return true;
+
+        quotedInlineTemplate ??= QUOTED_INLINE_TEMPLATE.test(fs.readFileSync(context.physicalFilename, 'utf8'));
+
+        return !quotedInlineTemplate;
+      };
+
+      return {
+        /** @param {any} node */
+        Element(node) {
+          const hasStyleBinding = (node.inputs ?? []).some(
+            /** @param {any} input */ (input) => input.name === 'style' && String(input.keySpan) === 'style',
+          );
+
+          for (const attribute of node.attributes ?? []) {
+            if (attribute.name !== 'style') continue;
+
+            const literal = hasStyleBinding || !canFixTemplate() ? null : toStyleObjectLiteral(attribute.value);
+
+            context.report({
+              loc: parserServices.convertNodeSourceSpanToLoc(attribute.sourceSpan),
+              messageId: 'templateStyleAttribute',
+              fix: literal
+                ? (fixer) =>
+                    fixer.replaceTextRange(
+                      [attribute.sourceSpan.start.offset, attribute.sourceSpan.end.offset],
+                      `[style]="${literal}"`,
+                    )
+                : null,
+            });
+          }
+
+          for (const input of node.inputs ?? []) {
+            if (input.name === 'style' && String(input.keySpan) === 'attr.style') {
+              reportSpan(input.sourceSpan, 'styleAttribute');
+            }
+          }
+        },
+      };
+    }
+
+    /** @param {any} scope @param {string} target */
+    const setsNonce = (scope, target) => {
+      let found = false;
+
+      /** @param {any} node */
+      const matches = (node) => node && sourceCode.getText(node) === target;
+
+      /** @param {any} node */
+      const visit = (node) => {
+        if (found || !node || typeof node.type !== 'string') return;
+
+        if (
+          node.type === 'AssignmentExpression' &&
+          node.left.type === 'MemberExpression' &&
+          !node.left.computed &&
+          node.left.property.name === 'nonce' &&
+          matches(node.left.object)
+        ) {
+          found = true;
+          return;
+        }
+
+        if (node.type === 'CallExpression') {
+          const method = calleeMemberName(node);
+          const [first, second] = node.arguments;
+
+          if (
+            (method === 'setAttribute' && matches(node.callee.object) && stringValue(first) === 'nonce') ||
+            (method === 'setAttribute' && matches(first) && stringValue(second) === 'nonce') ||
+            ((method === 'setAttributes' || method === 'assign') && matches(first) && hasProperty(second, 'nonce'))
+          ) {
+            found = true;
+            return;
+          }
+        }
+
+        for (const key of sourceCode.visitorKeys[node.type] ?? []) {
+          const child = node[key];
+
+          if (Array.isArray(child)) child.forEach(visit);
+          else visit(child);
+        }
+      };
+
+      visit(scope);
+
+      return found;
+    };
+
+    /** @param {any} node @param {string} text */
+    const checkHtmlString = (node, text) => {
+      if (HTML_STYLE_ATTRIBUTE.test(text) && !isDecoratorTemplate(node)) {
+        context.report({ node, messageId: 'htmlStyleAttribute' });
+      }
+    };
+
+    return {
+      /** @param {any} node */
+      CallExpression(node) {
+        const method = calleeMemberName(node);
+        const [first, second] = node.arguments;
+
+        if (method === 'setAttribute') {
+          if (stringValue(first) === 'style' || (node.arguments.length >= 3 && stringValue(second) === 'style')) {
+            context.report({ node, messageId: 'styleAttribute' });
+          }
+
+          return;
+        }
+
+        if (method === 'setAttributes' && hasProperty(second, 'style')) {
+          context.report({ node, messageId: 'styleAttribute' });
+          return;
+        }
+
+        if (method === 'createElement') {
+          const tag = stringValue(first)?.toLowerCase();
+
+          if (!tag || !NONCED_ELEMENTS.has(tag)) return;
+
+          const target = boundTarget(node);
+          const scope = enclosingScopeNode(node);
+
+          if (!target || !scope || !setsNonce(scope, sourceCode.getText(target))) {
+            context.report({ node, messageId: 'missingNonce', data: { tag } });
+          }
+
+          return;
+        }
+
+        const callee = node.callee;
+        const name = callee.type === 'Identifier' ? callee.name : callee.type === 'MemberExpression' ? method : null;
+
+        if (!name) return;
+
+        if (callee.type === 'Identifier' && (name === 'eval' || name === 'Function')) {
+          if (isGlobalReference(sourceCode, callee)) context.report({ node, messageId: 'dynamicCode', data: { name } });
+
+          return;
+        }
+
+        if (TIMER_FUNCTIONS.has(name) && (stringValue(first) !== null || first?.type === 'TemplateLiteral')) {
+          if (callee.type === 'MemberExpression' || isGlobalReference(sourceCode, callee)) {
+            context.report({ node, messageId: 'dynamicCode', data: { name: `${name}(string)` } });
+          }
+        }
+      },
+      /** @param {any} node */
+      NewExpression(node) {
+        if (
+          node.callee.type === 'Identifier' &&
+          node.callee.name === 'Function' &&
+          isGlobalReference(sourceCode, node.callee)
+        ) {
+          context.report({ node, messageId: 'dynamicCode', data: { name: 'new Function' } });
+        }
+      },
+      /** @param {any} node */
+      ObjectExpression(node) {
+        if (!isHostMetadata(node)) return;
+
+        for (const property of node.properties) {
+          const key = propertyName(property);
+
+          if (key === 'style' || key === '[attr.style]')
+            context.report({ node: property, messageId: 'styleAttribute' });
+        }
+      },
+      /** @param {any} node */
+      Literal(node) {
+        if (typeof node.value === 'string') checkHtmlString(node, node.value);
+      },
+      /** @param {any} node */
+      TemplateLiteral(node) {
+        checkHtmlString(node, node.quasis.map(/** @param {any} q */ (q) => q.value.cooked ?? q.value.raw).join('x'));
+      },
+    };
+  },
+};
+
+module.exports = noCspUnsafe;