From 82a9b1ea873a090e5a4e238966c12ac39681e8fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mart=C3=AD=20Malek?= Date: Thu, 11 Jan 2024 20:46:58 +0100 Subject: [PATCH] fix: add disable eslint comment for each usage of colors as a type --- .../colors-as-mapped-type.input.tsx | 2 +- .../colors-as-mapped-type.output.tsx | 3 +- .../colors-as-property-signature.input.tsx | 6 +- .../__tests__/colors-to-css-vars-test.ts | 16 ++-- src/codemods/colors-to-css-vars.ts | 73 ++++++------------- 5 files changed, 35 insertions(+), 65 deletions(-) diff --git a/src/codemods/__testfixtures__/colors-to-css-vars/colors-as-mapped-type.input.tsx b/src/codemods/__testfixtures__/colors-to-css-vars/colors-as-mapped-type.input.tsx index badf39cd4..a4fa9a26f 100644 --- a/src/codemods/__testfixtures__/colors-to-css-vars/colors-as-mapped-type.input.tsx +++ b/src/codemods/__testfixtures__/colors-to-css-vars/colors-as-mapped-type.input.tsx @@ -8,4 +8,4 @@ export const STATUS: { [K in string]: Colors } = { NOT_AVAILABLE: Colors.WHITE, OFFLINE: Colors.WHITE, PAYING: Colors.WHITE, -} \ No newline at end of file +}; \ No newline at end of file diff --git a/src/codemods/__testfixtures__/colors-to-css-vars/colors-as-mapped-type.output.tsx b/src/codemods/__testfixtures__/colors-to-css-vars/colors-as-mapped-type.output.tsx index 8b9fdecef..1a0517b21 100644 --- a/src/codemods/__testfixtures__/colors-to-css-vars/colors-as-mapped-type.output.tsx +++ b/src/codemods/__testfixtures__/colors-to-css-vars/colors-as-mapped-type.output.tsx @@ -1,5 +1,6 @@ import { ReadCssColorVariable } from '@freenow/wave'; +// eslint-disable-next-line @typescript-eslint/ban-types export const STATUS: { [K in string]: ReadCssColorVariable | (string & {}) } = { APPROACH: 'var(--wave-b-color-white)', AVAILABLE: 'var(--wave-b-color-white)', @@ -8,4 +9,4 @@ export const STATUS: { [K in string]: ReadCssColorVariable | (string & {}) } = { NOT_AVAILABLE: 'var(--wave-b-color-white)', OFFLINE: 'var(--wave-b-color-white)', PAYING: 'var(--wave-b-color-white)', -} \ No newline at end of file +}; \ No newline at end of file diff --git a/src/codemods/__testfixtures__/colors-to-css-vars/colors-as-property-signature.input.tsx b/src/codemods/__testfixtures__/colors-to-css-vars/colors-as-property-signature.input.tsx index 7862e6e79..cb43d9995 100644 --- a/src/codemods/__testfixtures__/colors-to-css-vars/colors-as-property-signature.input.tsx +++ b/src/codemods/__testfixtures__/colors-to-css-vars/colors-as-property-signature.input.tsx @@ -2,8 +2,8 @@ import { Colors } from '@freenow/wave'; export interface LabelVariant { color?: Colors - // backgroundColor?: Colors - // borderColor?: Colors + backgroundColor?: Colors + borderColor?: Colors } -// export interface AnotherInterface { color?: Colors } \ No newline at end of file +export interface AnotherInterface { color?: Colors } diff --git a/src/codemods/__tests__/colors-to-css-vars-test.ts b/src/codemods/__tests__/colors-to-css-vars-test.ts index 409918e55..b51eb9da3 100644 --- a/src/codemods/__tests__/colors-to-css-vars-test.ts +++ b/src/codemods/__tests__/colors-to-css-vars-test.ts @@ -2,14 +2,14 @@ jest.autoMockOff(); import { defineTest } from 'jscodeshift/dist/testUtils'; const tests = [ - // 'color-in-JSX-multi-import', - // 'color-in-JSX-single-import', - // 'template-multi-quasis-even', - // 'template-multi-quasis-odd', - // 'template-single-quasis', - // 'no-colors-usage', - 'colors-as-property-signature' - // 'colors-as-mapped-type' + 'color-in-JSX-multi-import', + 'color-in-JSX-single-import', + 'template-multi-quasis-even', + 'template-multi-quasis-odd', + 'template-single-quasis', + 'no-colors-usage', + 'colors-as-property-signature', + 'colors-as-mapped-type' ]; describe('colors-to-css-vars', () => { diff --git a/src/codemods/colors-to-css-vars.ts b/src/codemods/colors-to-css-vars.ts index 5ba78640c..588dcd6f7 100644 --- a/src/codemods/colors-to-css-vars.ts +++ b/src/codemods/colors-to-css-vars.ts @@ -1,5 +1,6 @@ import { API, + ASTPath, Collection, FileInfo, Identifier, @@ -7,8 +8,6 @@ import { JSCodeshift, Node, TemplateLiteral, - TSPropertySignature, - TSTypeAnnotation, TSTypeReference } from 'jscodeshift'; import { Options } from 'recast'; @@ -114,14 +113,12 @@ const replaceColorsForCssVarsInTemplateLiterals = ( }); }; -const isPropertySignature = (node: any): node is TSPropertySignature => node.type === 'TSPropertySignature'; - const addLeadingEslintComment = (j: JSCodeshift, node: Node): void => { const comment = j.commentLine(ESLINT_DISABLE_COMMENT, true, false); node.comments = [comment]; }; -const addDisableEslintCommentToTypes = ( +const addDisableEslintCommentToTypeUsages = ( ast: Collection, j: JSCodeshift, typeReferences: Collection @@ -131,12 +128,6 @@ const addDisableEslintCommentToTypes = ( // Find lines where Colors is being used typeReferences.forEach(path => { if (path.node.loc.start.line) uniqueLinesWithColorsUsage.add(path.node.loc.start.line); - - // const pathsStartingOnLine = path.node.loc && path.node.loc.start.line - // console.log(pathsStartingOnLine) - // const parent = path.parentPath.parentPath.value - - // if (isPropertySignature(parent)) addLeadingEslintComment(j, parent) }); // Find paths on those lines @@ -148,17 +139,25 @@ const addDisableEslintCommentToTypes = ( }) .paths(); - console.log(pathsOnLinesWithColorsUsage); + // Create a map to store all paths for every line + const pathsPerLine = new Map[]>(); - // pathsOnLinesWithColorsUsage.forEach((path) => { - // console.log(path.node) - // }) + // Iterate all paths and store them based on their line + pathsOnLinesWithColorsUsage.forEach(path => { + const line = path.node.loc.start.line; + if (pathsPerLine.get(line)) pathsPerLine.get(line).push(path); + else pathsPerLine.set(line, [path]); + }); - // Opt 1 // Find the first path for each line - // Iterate over paths and find the highest node (parent) for each line (this will be the first node on the line) - // (?) Add leading comment to that node - // (?) If it doesn't work, check strategy in example repo + pathsPerLine.forEach(paths => { + const firstPath = paths.reduce((accum, curr) => { + if (curr.node.loc.start.column < accum.node.loc.start.column) return curr; + return accum; + }); + + addLeadingEslintComment(j, firstPath.node); + }); }; export default (file: FileInfo, api: API, options: Options) => { @@ -219,40 +218,10 @@ export default (file: FileInfo, api: API, options: Options) => { } }); - // // Find property signatures using Colors (e.g. backgroundColor: Colors) - // const propertySignatures = ast.find(j.TSPropertySignature, { - // typeAnnotation: { - // typeAnnotation: { - // typeName: { - // name: (colorName: string) => localColorNames.includes(colorName) - // } - // } - // } - // }); - - // propertySignatures.forEach(signature => { - // // Find the type itself in the property signature - // const typeReference = j(signature).find(j.TSTypeReference, { - // typeName: { - // name: (colorName: string) => localColorNames.includes(colorName) - // } - // }); - - // // Build the replacement type for css variables - // const cssColorTypeReference = j.tsTypeReference(j.identifier(CSS_VARS_COLORS_REPLACEMENT_TYPE)); - - // // Replace the old type for the new one - // typeReference.forEach(reference => { - // reference.replace(cssColorTypeReference); - // }) - - // // Add a trailing comment disabling eslint - // const comment = j.commentLine(ESLINT_DISABLE_COMMENT, false, true) - // signature.node.comments = [comment] - // }); - // Add a comment to disable eslint for each Colors type usage - if (usagesAsTypes.length > 0) addDisableEslintCommentToTypes(ast, j, usagesAsTypes); + if (usagesAsTypes.length > 0) { + addDisableEslintCommentToTypeUsages(ast, j, usagesAsTypes); + } // Replace the usages of Colors as a type for the type representing our css variables usagesAsTypes.forEach(type => {