feat(eslint-plugin): add no-typeof rule

taiga-family · Jan 18, 2023 · cb47af2 · cb47af2
1 parent 926bb66
commit cb47af2
Show file tree

Hide file tree

Showing 17 changed files with 113 additions and 28 deletions.
diff --git a/projects/cdk/schematics/ng-update/v3/steps/migrate-taiga-proprietary-icons.ts b/projects/cdk/schematics/ng-update/v3/steps/migrate-taiga-proprietary-icons.ts
@@ -2,6 +2,7 @@ import {Rule, SchematicContext, Tree} from '@angular-devkit/schematics';
 import {updateWorkspace} from '@schematics/angular/utility/workspace';
 import {getPackageJsonDependency, getSourceFiles} from 'ng-morph';
 
+import {tuiIsString} from '../../../../utils';
 import {TuiSchema} from '../../../ng-add/schema';
 import {isInvalidAngularJson} from '../../../utils/angular-json-manipulations';
 import {getProjectTargetOptions} from '../../../utils/get-project-target-options';
@@ -73,7 +74,7 @@ export function migrateTaigaProprietaryIcons(options: TuiSchema): Rule {
                           const tdsSrc = `@taiga-ui/proprietary-tds-icons/src`;
                           const hasIcons = (targetOptions.assets as Asset[]).find(
                               asset => {
-                                  return typeof asset === `string`
+                                  return tuiIsString(asset)
                                       ? asset.includes(tdsSrc)
                                       : asset?.input?.includes(tdsSrc);
                               },

diff --git a/projects/cdk/schematics/utils/angular-json-manipulations.ts b/projects/cdk/schematics/utils/angular-json-manipulations.ts
@@ -5,6 +5,7 @@ import {getWorkspace, updateWorkspace} from '@schematics/angular/utility/workspa
 import {addPackageJsonDependency} from 'ng-morph';
 
 import {ALWAYS_FALSE_HANDLER, ALWAYS_TRUE_HANDLER} from '../../constants';
+import {tuiIsString} from '../../utils';
 import {TAIGA_VERSION} from '../ng-add/constants/versions';
 import {TuiSchema} from '../ng-add/schema';
 import {Asset} from '../ng-update/interfaces/asset';
@@ -25,7 +26,7 @@ export async function isInvalidAngularJson(tree: Tree): Promise<boolean> {
 
 function hasTaigaIcons(assets: Asset[]): boolean {
     return !!assets?.find(asset =>
-        typeof asset === `string`
+        tuiIsString(asset)
             ? asset.includes(`taiga-ui`)
             : asset?.input?.includes(`taiga-ui`),
     );

diff --git a/projects/cdk/utils/miscellaneous/index.ts b/projects/cdk/utils/miscellaneous/index.ts
@@ -7,6 +7,7 @@ export * from './flat-length';
 export * from './get-original-array-from-query-list';
 export * from './get-swipe-direction';
 export * from './is-number';
+export * from './is-object';
 export * from './is-present';
 export * from './is-string';
 export * from './mark-control-as-touched-and-validate';

diff --git a/projects/cdk/utils/miscellaneous/is-number.ts b/projects/cdk/utils/miscellaneous/is-number.ts
@@ -1,3 +1,4 @@
 export function tuiIsNumber(value: unknown): value is number {
+    // eslint-disable-next-line @taiga-ui/no-typeof
     return typeof value === `number`;
 }
diff --git a/projects/cdk/utils/miscellaneous/is-object.ts b/projects/cdk/utils/miscellaneous/is-object.ts
@@ -0,0 +1,6 @@
+export function tuiIsObject<T extends Record<any, any> | object>(
+    value: unknown,
+): value is NonNullable<T> {
+    // eslint-disable-next-line @taiga-ui/no-typeof
+    return typeof value === `object` && !!value;
+}
diff --git a/projects/cdk/utils/miscellaneous/is-string.ts b/projects/cdk/utils/miscellaneous/is-string.ts
@@ -1,3 +1,4 @@
 export function tuiIsString(value: unknown): value is string {
+    // eslint-disable-next-line @taiga-ui/no-typeof
     return typeof value === `string`;
 }
diff --git a/projects/cdk/utils/svg/svg-linear-gradient-processor.ts b/projects/cdk/utils/svg/svg-linear-gradient-processor.ts
@@ -1,4 +1,5 @@
 import {SafeHtml} from '@angular/platform-browser';
+import {tuiIsString} from '@taiga-ui/cdk/utils';
 
 /**
  * @description:
@@ -18,7 +19,7 @@ export function tuiSvgLinearGradientProcessor(
     svg: SafeHtml | string,
     salt?: number | string,
 ): SafeHtml | string {
-    if (typeof svg === `string`) {
+    if (tuiIsString(svg)) {
         const uniqueIds = extractLinearGradientIdsFromSvg(svg);
 
         return uniqueIds.reduce(

diff --git a/projects/demo/webpack.config.ts b/projects/demo/webpack.config.ts
@@ -1,3 +1,4 @@
+import {tuiIsObject} from '@taiga-ui/cdk';
 import {Configuration} from 'webpack';
 import {merge} from 'webpack-merge';
 
@@ -42,7 +43,7 @@ const config: Configuration = {
 export default (ngConfigs: Configuration): Configuration => {
     const ngRules = [...(ngConfigs.module?.rules || [])].map(rule => {
         if (
-            typeof rule === `object` &&
+            tuiIsObject(rule) &&
             DONT_MUTATE_RAW_FILE_CONTENTS.some(
                 pattern => rule.test instanceof RegExp && rule.test?.test(pattern),
             )

diff --git a/projects/eslint-plugin/configs/all.json b/projects/eslint-plugin/configs/all.json
@@ -4,6 +4,7 @@
         "@taiga-ui/injection-token-description": "error",
         "@taiga-ui/prefer-inject-decorator": "error",
         "@taiga-ui/prefer-self-destroy-service": "error",
+        "@taiga-ui/no-typeof": "error",
         "@taiga-ui/no-deep-imports": [
             "error",
             {

diff --git a/projects/eslint-plugin/index.js b/projects/eslint-plugin/index.js
@@ -12,5 +12,6 @@ module.exports = {
         'no-deep-imports': require('./rules/no-deep-imports'),
         'prefer-inject-decorator': require('./rules/prefer-inject-decorator'),
         'prefer-self-destroy-service': require('./rules/prefer-self-destroy-service'),
+        'no-typeof': require('./rules/no-typeof'),
     },
 };
diff --git a/projects/eslint-plugin/rules/no-typeof.js b/projects/eslint-plugin/rules/no-typeof.js
@@ -0,0 +1,69 @@
+/**
+ * @type {import('eslint').Rule.RuleModule}
+ */
+module.exports = {
+    meta: {
+        type: 'problem',
+        schema: [],
+    },
+    create(context) {
+        return {
+            /**
+             * @type {import('eslint').Rule.Node}
+             * @return {*}
+             */
+            "BinaryExpression[operator='==='][left.operator='typeof']"(node) {
+                markTypeOfString(context, node);
+                markTypeOfNumber(context, node);
+                markTypeOfObject(context, node);
+            },
+        };
+    },
+};
+
+/**
+ * @param {import('eslint').Rule.RuleContext} context
+ * @param {import('eslint').Rule.Node} node
+ */
+function markTypeOfString(context, node) {
+    if (checkRightOperandIs(node, `string`)) {
+        context.report({
+            node,
+            message: `Don't use "typeof value === 'string'" instead of tuiIsString(value)`,
+        });
+    }
+}
+
+/**
+ * @param {import('eslint').Rule.RuleContext} context
+ * @param {import('eslint').Rule.Node} node
+ */
+function markTypeOfNumber(context, node) {
+    if (checkRightOperandIs(node, `number`)) {
+        context.report({
+            node,
+            message: `Don't use "typeof value === 'number'" instead of tuiIsNumber(value)`,
+        });
+    }
+}
+
+/**
+ * @param {import('eslint').Rule.RuleContext} context
+ * @param {import('eslint').Rule.Node} node
+ */
+function markTypeOfObject(context, node) {
+    if (checkRightOperandIs(node, `object`)) {
+        context.report({
+            node,
+            message: `Don't use "typeof value === 'object'" instead of tuiIsObject(value)`,
+        });
+    }
+}
+
+/**
+ * @param {import('eslint').Rule.Node} node
+ * @param {string} type
+ */
+function checkRightOperandIs(node, type) {
+    return node?.right?.quasis?.[0]?.value?.raw === type || node?.right?.value === type;
+}
diff --git a/projects/icons/scripts/process-icons.ts b/projects/icons/scripts/process-icons.ts
@@ -1,3 +1,4 @@
+import {tuiIsString} from '@taiga-ui/cdk';
 import fs from 'fs';
 import {parse} from 'path';
 
@@ -27,13 +28,12 @@ export function processIcons(files: string[], interceptor?: ContentInterceptor):
 
         const wrapped = wrapIcon(src, name);
 
-        const final =
-            typeof wrapped === `string`
-                ? `${wrapped.replace(
-                      START,
-                      `<svg xmlns="http://www.w3.org/2000/svg"><g id="${name}" xmlns="http://www.w3.org/2000/svg"><svg`,
-                  )}</g></svg>`
-                : `<svg xmlns="http://www.w3.org/2000/svg" width="${wrapped.width}" height="${wrapped.height}">${wrapped.src}</svg>`;
+        const final = tuiIsString(wrapped)
+            ? `${wrapped.replace(
+                  START,
+                  `<svg xmlns="http://www.w3.org/2000/svg"><g id="${name}" xmlns="http://www.w3.org/2000/svg"><svg`,
+              )}</g></svg>`
+            : `<svg xmlns="http://www.w3.org/2000/svg" width="${wrapped.width}" height="${wrapped.height}">${wrapped.src}</svg>`;
 
         fs.writeFileSync(file, final);
 

diff --git a/projects/kit/components/avatar/avatar.component.ts b/projects/kit/components/avatar/avatar.component.ts
@@ -6,7 +6,7 @@ import {
     Input,
 } from '@angular/core';
 import {SafeResourceUrl} from '@angular/platform-browser';
-import {tuiDefaultProp, tuiRequiredSetter} from '@taiga-ui/cdk';
+import {tuiDefaultProp, tuiIsString, tuiRequiredSetter} from '@taiga-ui/cdk';
 import {tuiSizeBigger} from '@taiga-ui/core';
 import {tuiStringHashToHsl} from '@taiga-ui/kit/utils/format';
 
@@ -61,9 +61,7 @@ export class TuiAvatarComponent {
     }
 
     get iconAvatar(): boolean {
-        return (
-            typeof this.avatarUrl === 'string' && !!this.avatarUrl?.startsWith('tuiIcon')
-        );
+        return tuiIsString(this.avatarUrl) && !!this.avatarUrl?.startsWith('tuiIcon');
     }
 
     get computedText(): string {

diff --git a/projects/testing/cypress/snapshot/command.ts b/projects/testing/cypress/snapshot/command.ts
@@ -1,5 +1,5 @@
 /// <reference types="cypress" />
-
+import {tuiIsObject, tuiIsString} from '@taiga-ui/cdk';
 import {Options} from 'cypress-image-snapshot';
 import {matchImageSnapshotCommand} from 'cypress-image-snapshot/command';
 
@@ -37,11 +37,10 @@ export function tuiAddMatchImageSnapshotCommand(
             nameOrOptions: string | (Options & TuiSnapshotCommandOptions),
             options?: Options & TuiSnapshotCommandOptions,
         ) => {
-            const name = typeof nameOrOptions === `string` ? nameOrOptions : undefined;
-            const overloadedOptions =
-                typeof nameOrOptions === `object` && !!nameOrOptions
-                    ? nameOrOptions
-                    : options;
+            const name = tuiIsString(nameOrOptions) ? nameOrOptions : undefined;
+            const overloadedOptions = tuiIsObject(nameOrOptions)
+                ? nameOrOptions
+                : options;
 
             tuiWaitAllImgInside(prevSubject, overloadedOptions?.waitAllImages ?? true);
 

diff --git a/scripts/shared/bump-tui-deps.ts b/scripts/shared/bump-tui-deps.ts
@@ -1,3 +1,4 @@
+import {tuiIsString} from '../../projects/cdk';
 import {isTuiPackageName} from './is-tui-package-name';
 
 export interface TuiBumpDepsOptions {
@@ -18,7 +19,7 @@ export function bumpTuiDeps({
     const keys = Object.keys(deps).filter(key => isTuiPackageName(key, ignores));
 
     for (const key of keys) {
-        if (typeof deps[key] === `string`) {
+        if (tuiIsString(deps[key])) {
             deps[key] = isPeerDependency
                 ? (deps[key] as string)?.replace(prevVersion, newVersion)
                 : `^${newVersion}`;

diff --git a/scripts/shared/bump-tui-version-in-package-json.ts b/scripts/shared/bump-tui-version-in-package-json.ts
@@ -1,8 +1,10 @@
+import {tuiIsString} from '../../projects/cdk';
+
 export function bumpTuiVersionInPackageJson(
     packageJson: Record<string, unknown>,
     version: string,
 ): void {
-    if (`version` in packageJson && typeof packageJson[`version`] === `string`) {
+    if (`version` in packageJson && tuiIsString(packageJson[`version`])) {
         packageJson[`version`] = version;
     }
 }
diff --git a/scripts/shared/update-package-json-structure.ts b/scripts/shared/update-package-json-structure.ts
@@ -1,3 +1,4 @@
+import {tuiIsObject, tuiIsString} from '../../projects/cdk';
 import {bumpTuiDeps} from './bump-tui-deps';
 import {bumpTuiVersionInPackageJson} from './bump-tui-version-in-package-json';
 import {isTuiPackageName} from './is-tui-package-name';
@@ -19,15 +20,15 @@ export function updatePackageJsonStructure({
 }: UpdatePackageJsonOptions): void {
     const {name, dependencies, peerDependencies, devDependencies, packages} = packageJson;
 
-    if (typeof name === `string` && isTuiPackageName(name, ignores)) {
+    if (tuiIsString(name) && isTuiPackageName(name, ignores)) {
         bumpTuiVersionInPackageJson(packageJson, newVersion);
     }
 
-    if (typeof dependencies === `object`) {
+    if (tuiIsObject(dependencies)) {
         bumpTuiDeps({deps: dependencies, prevVersion, newVersion, ignores});
     }
 
-    if (typeof peerDependencies === `object`) {
+    if (tuiIsObject(peerDependencies)) {
         bumpTuiDeps({
             deps: peerDependencies,
             prevVersion,
@@ -37,11 +38,11 @@ export function updatePackageJsonStructure({
         });
     }
 
-    if (typeof devDependencies === `object`) {
+    if (tuiIsObject(devDependencies)) {
         bumpTuiDeps({deps: devDependencies, prevVersion, newVersion, ignores});
     }
 
-    if (isPackageLockFile && typeof packages === `object`) {
+    if (isPackageLockFile && tuiIsObject(packages)) {
         for (const packageLockJson of Object.values(packages)) {
             if (!isTuiPackageName(packageLockJson?.name, ignores)) {
                 continue;