Mistaken removal of semi from unnamed prop types in FC

AlexanderAbramovPav commented 6 months ago

Finding this tool very interesting to clean whole MonoRepo, but faced with 1 blocking issue.

SetUp:

"putout": "^35.32.0"
"typescript": "^5.1.3",

Steps in tsx:

--disable-all
--enable remove-unused-variables
--fix

Before --fix:

export const TestUpload: FunctionComponent<{
  config: any;
  onSuccess: () => void;
}> = ({ config, onSuccess }) => {

After --fix:

export const TestUpload: FunctionComponent<{
    config: any    onSuccess: () => void}> = ({config, onSuccess}) => {

So It doesn't mater whether I disable or enable rules (or change "printer" also) - I have always this behavior...removing of semi + many other stylistic changes Also I don't know how to remove some rules like @stylistic/ts/object-curly-spacing using only putout without EsLint and plugin with putout.

Would be grateful for insights and help :)

coderaiser commented 6 months ago

Just fixed in @putout/printer@8.42.0 🎉.

Also I don't know how to remove some rules like @stylistic/ts/object-curly-spacing using only putout without EsLint and plugin with putout.

This should be enough, just update your eslint.config.js with:

export default [{
  files: ['*.ts'],
  rules: {
       '@stylistic/ts/object-curly-spacing': 'off',
       '@stylistic/js/object-curly-spacing': 'off',
  },
}]

Is it works for you?

AlexanderAbramovPav commented 6 months ago

Thank you for your effort!

Still have same issues...

package.json "@putout/printer": "8.42.0",

.eslintrc.json (8.57.0)

{
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "root": true,
  "globals": {
    "shallow": true,
    "mount": true
  },
  "env": {
    "browser": true,
    "node": true,
    "jest": true,
    "es6": true,
    "es2021": true
  },
  "rules": {
    "@stylistic/js/object-curly-spacing": "off",
    "@stylistic/ts/object-curly-spacing": "off",
    "@stylistic/object-curly-spacing": "off",
    "@stylistic/js/indent": "off",
    "@stylistic/ts/indent": "off",
    "@stylistic/js/no-extra-semi": "off",
    "@stylistic/ts/no-extra-semi": "off",
    "@typescript-eslint/ban-ts-comment": "off",
    "no-unused-vars":"error",
    "putout/no-unresolved": "off"
  }
}

.putout.json

{
  "rules": {
    "apply-destructuring/object": "off",
    "conditions/apply-consistent-blocks": "off",
    "regexp/optimize": "off",
    "nodejs/declare": "off",
    "nodejs/convert-esm-to-commonjs": "off",
    "conditions/convert-equal-to-strict-equal": "off",
    "remove-empty/import": "off",
    "merge-duplicate-imports/join": "off",
    "types/convert-typeof-to-is-type": "off",
    "nodejs/add-node-prefix": "off",
    "logical-expressions/remove-duplicates": "off",
    "maybe/noop": "off",
    "remove-useless-variables/declaration": "off",
    "conditions/simplify": "off",
    "for-of/for-each": "off",
    "remove-useless-variables/remove": "off",
    "for-of/map": "off",
    "conditions/remove-boolean": "off",
    "simplify-ternary/value": "off",
    "apply-destructuring/array": "off",
    "promises/add-missing-await": "off",
    "promises/remove-useless-async": "off",
    "conditions/apply-comparison-order": "off",
    "conditions/remove-zero": "off",
    "conditions/remove-useless-else": "off",
    "for-of/reduce": "off",
    "try-catch/async": "off",
    "new/remove-useless": "off",
    "convert-optional-to-logical/assign": "off",
    "remove-useless-spread/object": "off",
    "apply-optional-chaining/use": "off",
    "typescript/convert-generic-to-shorthand": "off",
    "conditions/merge-if-statements": "off",
    "typescript/remove-unused-types": "off",
    "promises/convert-new-promise-to-async": "off",
    "logical-expressions/simplify": "off",
    "for-of/remove-useless-array-from": "off",
    "math/apply-exponentiation": "off",
    "promises/apply-top-level-await": "off",
    "promises/remove-useless-await": "off",
    "types/remove-double-negations": "off",
    "remove-empty/pattern": "off",
    "remove-empty/argument": "off",
    "remove-useless-variables/rename": "off",
    "remove-useless-variables/destruct": "off",
    "typescript/remove-useless-types": "off",
    "for-of/remove-useless-variables": "off",
    "for-of/for-length": "off",
    "try-catch/sync": "off",
    "remove-useless-arguments/arguments": "off",
    "typescript/apply-as-type-assertion": "off",
    "typescript/remove-useless-types-from-constants": "off",
    "simplify-ternary/spread": "off",
    "apply-at": "off",
    "apply-dot-notation": "off",
    "apply-early-return": "off",
    "apply-flat-map": "off",
    "apply-destructuring": "off",
    "apply-optional-chaining": "off",
    "apply-starts-with": "off",
    "apply-template-literals": "off",
    "apply-overrides": "off",
    "extract-object-properties": "off",
    "extract-sequence-expressions": "off",
    "madrun": "off",
    "maybe": "off",
    "webpack": "off",
    "eslint": "off",
    "package-json": "off",
    "remove-debugger": "off",
    "remove-iife": "off",
    "remove-console": "off",
    "remove-empty": "off",
    "remove-unreferenced-variables": "off",
    "remove-unused-private-fields": "off",
    "remove-unused-expressions": "off",
    "remove-useless-assign": "off",
    "remove-useless-replace": "off",
    "remove-useless-variables": "off",
    "remove-useless-map": "off",
    "remove-useless-constructor": "off",
    "remove-useless-array": "off",
    "remove-useless-array-constructor": "off",
    "remove-useless-array-entries": "off",
    "remove-useless-continue": "off",
    "remove-useless-operand": "off",
    "remove-useless-arguments": "off",
    "remove-useless-escape": "off",
    "remove-useless-spread": "off",
    "remove-useless-return": "off",
    "remove-useless-functions": "off",
    "remove-useless-template-expressions": "off",
    "remove-duplicate-case": "off",
    "remove-nested-blocks": "off",
    "remove-unreachable-code": "off",
    "remove-duplicate-keys": "off",
    "reuse-duplicate-init": "off",
    "split-assignment-expressions": "off",
    "split-variable-declarations": "off",
    "split-nested-destructuring": "off",
    "simplify-assignment": "off",
    "simplify-boolean-return": "off",
    "simplify-ternary": "off",
    "sort-imports-by-specifiers": "off",
    "convert-const-to-let": "off",
    "convert-apply-to-spread": "off",
    "convert-concat-to-flat": "off",
    "convert-arguments-to-rest": "off",
    "convert-object-assign-to-merge-spread": "off",
    "convert-optional-to-logical": "off",
    "convert-to-arrow-function": "off",
    "convert-array-copy-to-slice": "off",
    "convert-template-to-string": "off",
    "convert-index-of-to-includes": "off",
    "convert-assignment-to-arrow-function": "off",
    "convert-assignment-to-comparison": "off",
    "convert-quotes-to-backticks": "off",
    "convert-object-entries-to-array-entries": "off",
    "convert-label-to-object": "off",
    "merge-destructuring-properties": "off",
    "merge-duplicate-imports": "off",
    "merge-duplicate-functions": "off",
    "declare-imports-first": "off",
    "declare-before-reference": "off",
    "declare": "off",
    "math": "off",
    "putout": "off",
    "putout-config": "off",
    "generators": "off",
    "promises": "off",
    "typescript": "off",
    "coverage": "off",
    "gitignore": "off",
    "npmignore": "off",
    "browserlist": "off",
    "regexp": "off",
    "github": "off",
    "tape": "off",
    "try-catch": "off",
    "nodejs": "off",
    "montag": "off",
    "new": "off",
    "logical-expressions": "off",
    "types": "off",
    "conditions": "off",
    "for-of": "off",
    "filesystem": "off",
    "remove-unused-variables": "on"
  }
}

Basically for now the same behavior...

coderaiser commented 6 months ago

I can't reproduce this, please re-install 🐊Putout. Check out how it works in 🐊Putout Editor.

AlexanderAbramovPav commented 6 months ago

Steps done:

removed all eslint packages
reinstall "putout": "^35.32.0"
add "@putout/printer": "8.42.0",
deleted - eslintrc.json
deleted .putout.json

run --fix

Result:

export const BulkUpload: FunctionComponent<{
config: any;
onSuccess: () => ;
}> = ({config, onSuccess}) => {

No it's not deleting semi, but removing void (error Unexpected token parser - Type expected.ts(1110))

Then I did:

--disable-all
--fix

in putout.json now

    "rules": {
        "remove-unused-variables": "off",
        "apply-destructuring/array": "off",
        "apply-optional-chaining/use": "off",
        "remove-useless-variables/remove": "off",
        "remove-useless-array-constructor": "off",
        "remove-useless-return": "off",
        "convert-optional-to-logical/assign": "off",
        "merge-duplicate-imports/join": "off",
        "new/remove-useless": "off",
        "conditions/apply-consistent-blocks": "off",
        "conditions/convert-equal-to-strict-equal": "off",
        "for-of/for-each": "off"
    }

but in tsx file again:

export const TestUpload: FunctionComponent<{
    config: any    onSuccess: () => void}> = ({config, onSuccess}) => {

coderaiser commented 6 months ago

Still can’t reproduce, running putout —-fix 1.ts on such file changes nothing:

export const BulkUpload: FunctionComponent<{
    config: any;
    onSuccess: () => void;
}> = ({config, onSuccess}) => {
    f(config, onSuccess);
};

Could you please provide one file that you have now, and what you want to receive after transformation, and what do you have right now?

AlexanderAbramovPav commented 6 months ago

Thank you! This problem was solved once I reinstall all deps and remove eslint :)

Now I have 5 other case that I'm receiving after applying (I put more file for testing)

1 - how it is with ts error 2 - how it should be (was before)

Case 1

const MultiChips = <T>({items, idProperty, labelProperty, onRemove, xs, lg, md, sm, getLabel, disabled}: Props<T>): JSX.Element => {}

const MultiChips = <T,>({items, idProperty, labelProperty, onRemove, xs, lg, md, sm, getLabel, disabled}: Props<T,>): JSX.Element => {}

Case 2

            invalidatesTags: (result, _error, arg) => result ? [
                ...arg.TestRelationships.map((testRelationship) => {
                    type: 'TestBasisRelationshipsByTestId',
                    id: testRelationship.TestId,
                } as const), {
                    type: 'TestBasisRelationship',
                    id: 'List',
                }
,
            ] : [],

                  invalidatesTags: (result, _error, arg) =>
        result
          ? [
              ...arg.TestRelationships.map(
                testRelationship =>
                  ({
                    type: 'TestBasisRelationshipsByTestId',
                    id: testRelationship.TestId,
                  }) as const,
              ),
              { type: 'TestBasisRelationship', id: 'List' },
            ]
          : [],

Case 3

import 'redux-thunk/extend-redux'; import type 'redux-thunk/extend-redux';

Case 4

export class CallablePolicy implements PolicyBaseextends Policy {
    validate = (options?: any): boolean => {
        return this.requirements.every((requirement) => {
            return requirement.verify(options);
        });
    };
}

export class CallablePolicy extends Policy implements PolicyBase {
  validate = (options?: any): boolean => {
    return this.requirements.every((requirement) => {
      return requirement.verify(options);
    });
  };
}

Case 5

type HttpErrorMessage = {
    StatusCodes.BAD_REQUEST: string;
    StatusCodes.UNAUTHORIZED: string;
    StatusCodes.FORBIDDEN: string;
    StatusCodes.NOT_FOUND: string;
    StatusCodes.INTERNAL_SERVER_ERROR: string;
    StatusCodes.SERVICE_UNAVAILABLE: string;
};

type HttpErrorMessage = {
  [StatusCodes.BAD_REQUEST]: string;
  [StatusCodes.UNAUTHORIZED]: string;
  [StatusCodes.FORBIDDEN]: string;
  [StatusCodes.NOT_FOUND]: string;
  [StatusCodes.INTERNAL_SERVER_ERROR]: string;
  [StatusCodes.SERVICE_UNAVAILABLE]: string;
};

coderaiser commented 6 months ago

Created another issue for Case 1: https://github.com/coderaiser/putout/issues/207

Case 3

-import 'redux-thunk/extend-redux';
+import type 'redux-thunk/extend-redux';

Is it correct syntax? Shouldn't it be:

import type from 'redux-thunk/extend-redux';

AlexanderAbramovPav commented 6 months ago

Sorry, here should be import 'redux-thunk/extend-redux';, but It get import type 'redux-thunk/extend-redux';

coderaiser commented 6 months ago

Case 2: fixed in @putout/printer@8.45.0 @putout/printer@8.47.0(🐊Putout Editor) 🎉.

Case 3: I cannot reproduce this: https://putout.cloudcmd.io/#/gist/8e8ee59a76044d924ad72278506fd31d/c584cdc7899bb1057fb8199137639ab1c63921e8

Case 4: fixed in @putout/printer@8.44.0 (🐊Putout Editor) 🎉.

Case 5: fixed in @putout/printer@8.43.0 (🐊Putout Editor) 🎉.

Is it works for you?

AlexanderAbramovPav commented 6 months ago

Sorry, For case 3 I had - import type {} from 'redux-thunk/extend-redux'; - was my mistake

coderaiser commented 6 months ago

Sorry, For case 3 I had - import type {} from 'redux-thunk/extend-redux'; - was my mistake

First two and second two produces the same AST:

https://putout.cloudcmd.io/#/gist/c58373dd18fdfb97851b88209c1b31a8/9d1a064650605c94428f8e657aa2f2cd0489561f

AlexanderAbramovPav commented 6 months ago

Thank you! Get it!

coderaiser / putout

Mistaken removal of semi from unnamed prop types in FC #206