Missing npm package types

[bwswedberg]

Describe the bug
A clear and concise description of what the bug is.

The types (dist/*.d.ts) aren't packaged with the npm repo which prevents typescript projects from inferring types.

To Reproduce
Steps to reproduce the behavior:

1. Create a typescript cypress project
2. npm install --save-dev @frsource/cypress-plugin-visual-regression-diff
3. Begin @frsource/cypress-plugin-visual-regression-diff install steps:

import '@frsource/cypress-plugin-visual-regression-diff'; // warning shown here

Could not find a declaration file for module '@frsource/cypress-plugin-visual-regression-diff'. '/Users/.../node_modules/@frsource/cypress-plugin-visual-regression-diff/dist/support.js' implicitly has an 'any' type.
Try npm i --save-dev @types/frsource__cypress-plugin-visual-regression-diff if it exists or add a new declaration (.d.ts) file containing declare module '@frsource/cypress-plugin-visual-regression-diff';ts(7016)

Expected behavior
A clear and concise description of what you expected to happen.

Types to be included in npm package since this is a typescript repo. It looks like they previously were based on the package.json.

Screenshots
If applicable, add screenshots to help explain your problem.

Please complete the following information:

• OS and version: [e.g. Windows 10 build. 19043.1319] MacOS 12.4
• Browser and version [e.g. chrome 22] N/A
• Cypress version [e.g. 8.6.0] 10.11.0
• @frsource/cypress-plugin-visual-regression-diff version 3.0.2

Additional context
Add any other context about the problem here.

[FRSgit]

Hello @bwswedberg, thanks for such detailed bug report, it's really hearth-warming to see those 😄
You're right, the typings were in the package at some point, so it's a regression. Sorry for my mistake - I've introduced an issue by doing an upgrade of microbundle recently.

I've just released version 3.0.3 with a fix, enjoy! 🎉 (and please - confirm here that it works 😄 )

[bwswedberg]

Thanks for the speedy update!! I really appreciate your effort. It feels like no visual regression tools are keeping pace with cypress releases--so I greatly this!

The fix works as expected for the support type hints found in cypress/support/.... I was able to run .matchImage() in a few tests.

However, when installing I still noticed the types are not coming through in my cypress.config.ts. The below code shows what that looked like. Right now I'm working around it by referencing the "plugins" export directly.

// cypress.config.ts
import { defineConfig } from 'cypress';

// ts: Cannot find module '@frsource/cypress-plugin-visual-regression-diff/plugins' or its corresponding type declarations.
import { initPlugin } from '@frsource/cypress-plugin-visual-regression-diff/plugins';

// Resolves the export w/ types by referencing export directly
import { initPlugin } from '@frsource/cypress-plugin-visual-regression-diff/dist/plugins';

[github-actions]

🎉 This issue has been resolved in version 3.0.4 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀

[FRSgit]

There are two things there:

1. Adressing the missing typings issue:

According to the typescript repo, you must set moduleResolution to node16 in your tsconfig.json to make it working with modern exports fields (see here).

But I've found a solution on how to support "older typescript configuration". This got release under version 3.0.4, please try it out (and also, have a look at updated example in this repo).

2. Addressing the issue where you need to still use @frsource/cypress-plugin-visual-regression-diff/dist/support import path when bundling your app with webpack.

This is an issue of Cypress - under the hood, the webpack processor used by Cypress internally is using outdated webpack version 4. This means - no proper support for exports field in package.json (which is the modern node syntax for expressing package exports).

Unfortunately, this issue cannot be handled before Cypress upgrades webpack to v5. Issue that tracks webpack 5 upgrade is here.