chore: fix prettier and use strict mode (#52)

fix prettier and use strict mode

.prettierrc.json

@@ -1,5 +1,6 @@
 {
   "printWidth": 100,
+  "tabWidth": 2,
   "useTabs": false,
   "singleQuote": true,
   "trailingComma": "none",

CONTRIBUTING.md

@@ -48,7 +48,7 @@ Push your changes to your branch and open a pull request against the parent repo
 
 Upon Pull Request submission, your code will be reviewed by the maintainers. They will confirm at least the following:
 
--   Tests run successfully (unit, coverage, integration, style).
--   Contribution policy has been followed.
+- Tests run successfully (unit, coverage, integration, style).
+- Contribution policy has been followed.
 
 One (human) reviewer will need to sign off on your Pull Request before it can be merged.

README.md

@@ -8,11 +8,11 @@ A [Cypress](https://www.cypress.io/) plugin which automatically adds and enables
 
 ## Table of Contents
 
--   [Why Do I Need This Plugin?](#why-do-i-need-this-plugin)
--   [Installation](#installation)
--   [Usage](#usage)
--   [Example](#example)
--   [Configuration](#configuration)
+- [Why Do I Need This Plugin?](#why-do-i-need-this-plugin)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Example](#example)
+- [Configuration](#configuration)
 
 ## Why Do I Need This Plugin?
 
@@ -37,23 +37,23 @@ import { cypressCodegen } from 'cypress-codegen/dist/plugin';
 import { defineConfig } from 'cypress';
 
 export default defineConfig({
-    e2e: {
-        setupNodeEvents(on, config) {
-            cypressCodegen(on, config);
-            return config;
-        }
-    },
+  e2e: {
+    setupNodeEvents(on, config) {
+      cypressCodegen(on, config);
+      return config;
+    }
+  },
 
-    component: {
-        setupNodeEvents(on, config) {
-            cypressCodegen(on, config);
-            return config;
-        },
-        devServer: {
-            framework: 'create-react-app',
-            bundler: 'webpack'
-        }
+  component: {
+    setupNodeEvents(on, config) {
+      cypressCodegen(on, config);
+      return config;
+    },
+    devServer: {
+      framework: 'create-react-app',
+      bundler: 'webpack'
     }
+  }
 });
 ```
 
@@ -66,8 +66,8 @@ import 'cypress-codegen';
 3. Put all of your custom commands in `cypress/commands` as regular functions. It is recommended to separate each command into its own file of the same name.
 
 4. Run any Cypress test, and `cypress-codegen` will:
-    - load these functions as valid custom commands
-    - generate a special Cypress type definition for each function which will enable IntelliSense and "go to definition" shortcuts in your Cypress test code
+   - load these functions as valid custom commands
+   - generate a special Cypress type definition for each function which will enable IntelliSense and "go to definition" shortcuts in your Cypress test code
 
 ## Example
 
@@ -102,7 +102,7 @@ In cypress.config.ts:
 
 ```ts
 env: {
-    PROJECT: 'my-project';
+  PROJECT: 'my-project';
 }
 ```
 
@@ -120,6 +120,6 @@ or in `cypress.config.js`:
 
 ```ts
 env: {
-    CODEGEN: false;
+  CODEGEN: false;
 }
 ```

cypress/commands/custom-mount.tsx

@@ -1,17 +1,17 @@
 import * as React from 'react';
 
-export const customMount = (Component: React.ReactElement) => {
-    cy.mount(
-        <div>
-            <Component />
-        </div>
-    );
+export const customMount = (Component: React.FC) => {
+  cy.mount(
+    <div>
+      <Component />
+    </div>
+  );
 };
 
 declare global {
-    namespace Cypress {
-        interface Chainable {
-            customMount(Component: React.ReactElement): Chainable;
-        }
+  namespace Cypress {
+    interface Chainable {
+      customMount(Component: React.FC): Chainable;
     }
+  }
 }

cypress/component/component-example.cy.tsx

@@ -16,36 +16,36 @@ import * as React from 'react';
 const componentText = 'Here is a component';
 
 describe('Example Test', () => {
-    beforeEach(() => {
-        cy.mount(<p>{componentText}</p>);
-    });
-
-    it('should import custom commands in component tests', () => {
-        cy.functionExample(componentText);
-    });
-
-    it('should dynamically import custom commands from arrow functions', () => {
-        cy.arrowFunctionExample(componentText);
-    });
-
-    it('should support scoped methods', () => {
-        cy.contains(componentText).functionExampleScoped(componentText);
-    });
-
-    it('should dynamically import nested custom commands', () => {
-        cy.nestedExample(componentText);
-    });
-
-    it('should chain custom commands', () => {
-        cy.log(componentText)
-            .functionExample(componentText)
-            .arrowFunctionExample(componentText)
-            .nestedExample(componentText);
-    });
-
-    it('should support custom mount commands', () => {
-        const myComponent = () => <>{'Different text'}</>;
-        cy.customMount(myComponent);
-        cy.contains('Different text');
-    });
+  beforeEach(() => {
+    cy.mount(<p>{componentText}</p>);
+  });
+
+  it('should import custom commands in component tests', () => {
+    cy.functionExample(componentText);
+  });
+
+  it('should dynamically import custom commands from arrow functions', () => {
+    cy.arrowFunctionExample(componentText);
+  });
+
+  it('should support scoped methods', () => {
+    cy.contains(componentText).functionExampleScoped(componentText);
+  });
+
+  it('should dynamically import nested custom commands', () => {
+    cy.nestedExample(componentText);
+  });
+
+  it('should chain custom commands', () => {
+    cy.log(componentText)
+      .functionExample(componentText)
+      .arrowFunctionExample(componentText)
+      .nestedExample(componentText);
+  });
+
+  it('should support custom mount commands', () => {
+    const myComponent = () => <>{'Different text'}</>;
+    cy.customMount(myComponent);
+    cy.contains('Different text');
+  });
 });

cypress/support/component-index.html

@@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <meta charset="utf-8" />
-        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-        <title>Components App</title>
-    </head>
-    <body>
-        <div data-cy-root></div>
-    </body>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
 </html>

package.json

@@ -21,6 +21,7 @@
   "devDependencies": {
     "@types/glob": "7.2.0",
     "@types/jest": "28.1.6",
+    "@types/react": "18.0.17",
     "cypress": "10.4.0",
     "eslint": "8.21.0",
     "eslint-plugin-cypress": "2.12.1",

src/common.ts

@@ -13,4 +13,4 @@ limitations under the License.
 
 export const COMMANDS_DIRECTORY = 'cypress/commands';
 
-export const isScopedMethod = (methodName: string) => methodName.endsWith('Scoped');
+export const isScopedMethod = (methodName?: string) => methodName?.endsWith('Scoped');

src/generate-types-from-abstract-syntax-tree.ts

@@ -28,7 +28,7 @@ import { resolve } from 'path';
 import { format, Options } from 'prettier';
 import { isScopedMethod } from './common';
 
-export const generateTypesFromAbstractSyntaxTree = (filePath: string, prettierConfig?: Options) => {
+export const generateTypesFromAbstractSyntaxTree = (filePath: string, prettierConfig: Options) => {
   const contents = readFileSync(resolve(filePath)).toString();
   const ast = parse(contents, { sourceType: 'module', plugins: ['typescript', 'jsx'] });
   const currentNodes = ast.program.body;
@@ -38,8 +38,11 @@ export const generateTypesFromAbstractSyntaxTree = (filePath: string, prettierCo
         t.isExportNamedDeclaration(node) &&
         (t.isFunctionDeclaration(node.declaration) || t.isVariableDeclaration(node.declaration))
     )
-    .map((node: ExportNamedDeclaration) => {
-      const declaration = node.declaration as FunctionDeclaration | VariableDeclaration;
+    .map(node => {
+      const exportNamedDeclaration = node as ExportNamedDeclaration;
+      const declaration = exportNamedDeclaration.declaration as
+        | FunctionDeclaration
+        | VariableDeclaration;
       const isVariableDeclaration = t.isVariableDeclaration(declaration);
       const functionIdentifier = isVariableDeclaration
         ? (declaration.declarations[0].id as Identifier)
@@ -56,10 +59,10 @@ export const generateTypesFromAbstractSyntaxTree = (filePath: string, prettierCo
       const firstParamOmitted = parameters.slice(1);
       return {
         functionIdentifier,
-        parameters: isScopedMethod(functionIdentifier.name) ? firstParamOmitted : parameters
+        parameters: isScopedMethod(functionIdentifier?.name) ? firstParamOmitted : parameters
       };
     });
-  const newInterface = generateInterface(customCommands);
+  const newInterface = generateInterface(customCommands as CustomCommand[]);
   const lastNode = currentNodes[currentNodes.length - 1];
   const interfaceExists = t.isTSModuleDeclaration(lastNode) && lastNode.global && lastNode.declare;
   const newNodes = interfaceExists ? currentNodes.slice(0, currentNodes.length - 1) : currentNodes;