fix: typings for older typescript (#170)

closes #167

Author: FRSgit

.eslintrc.js

@@ -1,38 +1,31 @@
 module.exports = {
   root: true,
-  plugins: [
-    '@typescript-eslint',
-    'eslint-comments',
-    "cypress"
-  ],
+  plugins: ["@typescript-eslint", "eslint-comments", "cypress"],
   env: {
     es6: true,
     node: true,
-    'cypress/globals': true
+    "cypress/globals": true,
   },
   extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:eslint-comments/recommended',
-    'prettier'
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:eslint-comments/recommended",
+    "prettier",
   ],
   overrides: [
     {
-      files: ['**.ts'],
-      parser: '@typescript-eslint/parser',
+      files: ["**.ts"],
+      parser: "@typescript-eslint/parser",
       parserOptions: {
-        sourceType: 'module',
-        project: [
-          './tsconfig.json',
-          './packages/*/tsconfig.json',
-        ],
+        sourceType: "module",
+        project: ["./tsconfig.json", "./example/tsconfig.json"],
         tsconfigRootDir: __dirname,
         warnOnUnsupportedTypeScriptVersion: false,
         EXPERIMENTAL_useSourceOfProjectReferenceRedirect: true,
       },
       rules: {
-        '@typescript-eslint/explicit-module-boundary-types': 'off'
-      }
+        "@typescript-eslint/explicit-module-boundary-types": "off",
+      },
     },
   ],
 };

.github/FUNDING.yml

@@ -2,4 +2,4 @@
 
 github: [FRSOURCE]
 patreon: frsource
-custom: ['https://www.buymeacoffee.com/FRSOURCE']
+custom: ["https://www.buymeacoffee.com/FRSOURCE"]

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,17 +1,17 @@
 ---
 name: Bug report
 about: Create a report to help us improve
-title: ''
+title: ""
 labels: bug
-assignees: ''
-
+assignees: ""
 ---
 
 **Describe the bug**
 A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -24,9 +24,10 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **Please complete the following information:**
- - OS and version: [e.g. Windows 10 build. 19043.1319]
- - Browser and version [e.g. chrome 22]
- - Cypress version [e.g. 8.6.0]
+
+- OS and version: [e.g. Windows 10 build. 19043.1319]
+- Browser and version [e.g. chrome 22]
+- Cypress version [e.g. 8.6.0]
 
 **Additional context**
 Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,10 +1,9 @@
 ---
 name: Feature request
 about: Suggest an idea for this project
-title: ''
+title: ""
 labels: enhancement
-assignees: ''
-
+assignees: ""
 ---
 
 **Is your feature request related to a problem? Please describe.**

.github/workflows/ci.yml

@@ -1,4 +1,4 @@
-name: CI 
+name: CI
 on:
   pull_request_target:
     branches:
@@ -17,7 +17,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '16.x'
+          node-version: "16.x"
       - name: Remove git auth
         run: git config --unset http.https://github.com/.extraheader
       - name: Generate yarn cache-key
@@ -52,7 +52,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '16.x'
+          node-version: "16.x"
       - name: remove git auth
         run: git config --unset http.https://github.com/.extraheader
       - name: Configure Yarn cache
@@ -79,7 +79,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '16.x'
+          node-version: "16.x"
       - name: remove git auth
         run: git config --unset http.https://github.com/.extraheader
       - name: Configure Yarn cache
@@ -110,7 +110,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '16.x'
+          node-version: "16.x"
       - name: remove git auth
         run: git config --unset http.https://github.com/.extraheader
       - name: Configure Yarn cache
@@ -149,7 +149,7 @@ jobs:
           git config --global user.email "$(git --no-pager log --format=format:'%ae' -n 1)"
       - uses: actions/setup-node@v3
         with:
-          node-version: '16.x'
+          node-version: "16.x"
       - name: remove git auth
         run: git config --unset http.https://github.com/.extraheader
       - name: Configure Yarn cache

.prettierignore

@@ -0,0 +1,7 @@
+node_modules
+dist
+coverage
+CHANGELOG.md
+.yarnrc.yml
+example/.yarnrc.yml
+.yarn

CONTRIBUTING.md

@@ -29,6 +29,7 @@ Don’t hesitate to ask a question directly on the [discussions board](https://g
 - We have no preference about number of commits on the PR - they will be all squashed by GitHub while merging
 
 - When creating a new feature/plugin/integration:
+
   - Make sure the feature is covered by tests
   - Provide a meaningful description. In most cases it would make sens to first open a issue with a suggestion, discuss about it and have it approved before working on it
 
@@ -40,12 +41,14 @@ Don’t hesitate to ask a question directly on the [discussions board](https://g
 ## Development Setup
 
 <!-- textlint-disable spelling -->
+
 You will need [Node.js](https://nodejs.org/en/) **version 16+** and [yarn](https://yarnpkg.com/getting-started/install).
+
 <!-- textlint-enable -->
 
 After cloning the repository, run:
 
-``` bash
+```bash
 yarn i # installs the project dependencies
 cd example && yarn i # install dependencies for example project (useful for testing)
 ```
@@ -58,7 +61,7 @@ Commit messages should follow the [conventional commits v1.0.0](https://www.conv
 
 When fired in the project root they will run corresponding actions in every nested package at once.
 
-``` bash
+```bash
 # build the project for NPM and example usage
 $ yarn build
 

README.md

@@ -71,54 +71,63 @@ npm install --save-dev @frsource/cypress-plugin-visual-regression-diff
 Next, you need to import the library:
 
 - first, in your support file (located by default in `cypress/support/index.js`):
+
 ```ts
 // typescript / ES6
-import '@frsource/cypress-plugin-visual-regression-diff';
+import "@frsource/cypress-plugin-visual-regression-diff";
 
 // javascript
-require('@frsource/cypress-plugin-visual-regression-diff');
+require("@frsource/cypress-plugin-visual-regression-diff");
 ```
 
 - secondly:
   - (for Cypress 10.0+) in `cypress.config.js` (or `cypress.config.ts`):
+
 ```ts
 // typescript / ES6
-import { defineConfig } from 'cypress';
-import { initPlugin } from '@frsource/cypress-plugin-visual-regression-diff/plugins';
+import { defineConfig } from "cypress";
+import { initPlugin } from "@frsource/cypress-plugin-visual-regression-diff/plugins";
 
 export default defineConfig({
   // initPlugin must be called in the section where it is used: e2e or component
   e2e: {
     setupNodeEvents(on, config) {
       initPlugin(on, config);
-    }
+    },
   },
   component: {
     setupNodeEvents(on, config) {
       initPlugin(on, config);
-    }
-  }
+    },
+  },
 });
 ```
-  - (for Cypress <10.0) in your plugins file (located by default in `cypress/plugins/index.js`):
+
+- (for Cypress <10.0) in your plugins file (located by default in `cypress/plugins/index.js`):
+
 ```ts
 // typescript / ES6
-import { initPlugin } from '@frsource/cypress-plugin-visual-regression-diff/plugins';
+import { initPlugin } from "@frsource/cypress-plugin-visual-regression-diff/plugins";
 
-export default function (on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions) {
+export default function (
+  on: Cypress.PluginEvents,
+  config: Cypress.PluginConfigOptions
+) {
   initPlugin(on, config);
 
   return config;
-};
+}
 
 // javascript
-const { initPlugin } = require('@frsource/cypress-plugin-visual-regression-diff/plugins');
+const {
+  initPlugin,
+} = require("@frsource/cypress-plugin-visual-regression-diff/plugins");
 
 module.exports = function (on, config) {
   initPlugin(on, config);
 
   return config;
-}
+};
 ```
 
 That's it - now let's see how to use the library in [usage section](#usage).
@@ -128,7 +137,7 @@ That's it - now let's see how to use the library in [usage section](#usage).
 Once installed, the library might be used by writing in your test:
 
 ```ts
-cy.get('.an-element-of-your-choice').matchImage();
+cy.get(".an-element-of-your-choice").matchImage();
 ```
 
 Or, if you would like to make a screenshot of whole document:
@@ -184,7 +193,7 @@ cy.matchImage({
   // maximum threshold above which the test should fail
   // default: 0.01
   maxDiffThreshold: 0.1,
-  // forces scale factor to be set as value "1" 
+  // forces scale factor to be set as value "1"
   // helps with screenshots being scaled 2x on high-density screens like Mac Retina
   // default: true
   forceDeviceScaleFactor: false,
@@ -206,16 +215,15 @@ npx cypress run --env "pluginVisualRegressionUpdateImages=true,pluginVisualRegre
 
 ```ts
 // cypress.config.ts
-import { defineConfig } from 'cypress';
+import { defineConfig } from "cypress";
 
 export default defineConfig({
   env: {
     pluginVisualRegressionUpdateImages: true,
-    pluginVisualRegressionDiffConfig: { threshold: 0.01 }
-  }
-})
+    pluginVisualRegressionDiffConfig: { threshold: 0.01 },
+  },
+});
 {
-  
 }
 ```
 
@@ -235,8 +243,8 @@ For more ways of setting environment variables [take a look here](https://docs.c
 
 Screenshots in Cypress do not scale to the viewport size by default. You can change this behavior:
 
-* globally, by changing default screenshot configuration: <code>Cypress.Screenshot.defaults({ capture: 'viewport' });</code>
-* locally, by passing screenshot configuration directly to the <code>.matchImage</code> command: <code>cy.matchImage({ screenshotConfig: { capture: 'viewport' } });</code>
+- globally, by changing default screenshot configuration: <code>Cypress.Screenshot.defaults({ capture: 'viewport' });</code>
+- locally, by passing screenshot configuration directly to the <code>.matchImage</code> command: <code>cy.matchImage({ screenshotConfig: { capture: 'viewport' } });</code>
 
 </details>
 

__tests__/fixtures/prepare-screenshot-for-cleanup.spec.cy.js

@@ -1,6 +1,6 @@
-describe('Cleanup test', () => {
-  it('Create screenshot to be removed', () => {
-    cy.visit('/');
+describe("Cleanup test", () => {
+  it("Create screenshot to be removed", () => {
+    cy.visit("/");
     cy.get('[data-testid="description"]').matchImage();
   });
 });

example/cypress.config.js

@@ -0,0 +1,22 @@
+import { defineConfig } from "cypress";
+import { initPlugin } from "@frsource/cypress-plugin-visual-regression-diff/plugins";
+
+module.exports = defineConfig({
+  video: false,
+  e2e: {
+    setupNodeEvents(on, config) {
+      initPlugin(on, config);
+    },
+    specPattern: "cypress/e2e/**/*.cy.{js,jsx,ts,tsx}",
+  },
+
+  component: {
+    setupNodeEvents(on, config) {
+      initPlugin(on, config);
+    },
+    devServer: {
+      framework: "vue-cli",
+      bundler: "webpack",
+    },
+  },
+});