Prepare plugin for release

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -0,0 +1,11 @@
+{
+ "$schema": "https://unpkg.com/@changesets/config@2.3.0/schema.json",
+ "changelog": "@changesets/cli/changelog",
+ "commit": false,
+ "fixed": [],
+ "linked": [],
+ "access": "public",
+ "baseBranch": "main",
+ "updateInternalDependencies": "patch",
+ "ignore": []
+}

.github/workflows/ci.yml

@@ -0,0 +1,28 @@
+name: CI
+
+on:
+ push:
+ branches:
+ - main
+ pull_request:
+ branches: [main]
+
+jobs:
+ checks:
+ if: "!contains(toJSON(github.event.commits.*.message), '[skip ci]')"
+ runs-on: ubuntu-latest
+
+ steps:
+ - name: Checkout source code
+ uses: actions/checkout@v3
+ with:
+ node-version: '16'
+
+ - name: Install dependencies
+ run: npm ci
+
+ - name: Linting
+ run: npm run lint
+
+ - name: Formatting
+ run: npm run format

.github/workflows/deploy.yml

@@ -0,0 +1,37 @@
+name: Deploy
+
+on:
+ push:
+ branches:
+ - main
+
+jobs:
+ build:
+ if: "!contains(toJSON(github.event.commits.*.message), '[skip ci]')"
+ runs-on: ubuntu-latest
+ environment: Production
+
+ steps:
+ - name: Checkout source code
+ uses: actions/checkout@v3
+ with:
+ node-version: '16'
+
+ - name: Install dependencies
+ run: npm ci
+
+ - name: Build
+ run: npm run build
+
+ - name: Configure AWS Credentials
+ uses: aws-actions/configure-aws-credentials@v2
+ with:
+ aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+ aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+ aws-region: ${{ secrets.AWS_REGION }}
+
+ - name: Deploy dashboard to bucket
+ run: aws s3 sync ./apps/web/dist s3://${{ secrets.S3_BUCKET }}
+
+ - name: Invalidate dashboard cloudfront
+ run: aws cloudfront create-invalidation --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} --paths "/*"

.prettierignore

@@ -0,0 +1,6 @@
+node_modules
+
+**/dist
+.esbuild
+**/dump
+.turbo

.prettierrc

@@ -0,0 +1,6 @@
+{
+ "trailingComma": "es5",
+ "tabWidth": 2,
+ "semi": true,
+ "singleQuote": true
+}

CONTRIBUTE.md

@@ -1,17 +1,19 @@
-
 ## Project Structure
 
-The project is a monorepo created with [turbo](https://turbo.build/repo). It consists of a cypress plugin and a web application.
+- `packages/cypress-debugger` - the entry point. It exports `debuggerSupport` and `debuggerPlugin` functions, required for plugin installation and a set of types used in the web application.
 
-The plugin generates a `json` file for each test into the `dump` folder inside the working directory. Each file contains the following fields:
+- `packages/support` - [Cypress Events](https://docs.cypress.io/api/cypress-api/catalog-of-events) handlers that are responsible for collecting events:
 
-- `cy` - a list of cypress events. The data is collected from the cypress [`log:added`](https://docs.cypress.io/api/cypress-api/catalog-of-events) event.
+ - cypress steps
+ - [rrweb](https://www.npmjs.com/package/rrweb) events
+ - network requests using the [HAR generator cypress plugin](https://github.com/NeuraLegion/cypress-har-generator)
 
-- `rr` - a list of [rrweb](https://www.npmjs.com/package/rrweb) records, which represents the mutations in the DOM. The entries are linked to `cy` events on cypress `log:added` and `log:changed` events.
+- `packages/plugin` - exports a function that attaches [Cypress Plugin Events](https://docs.cypress.io/api/plugins/writing-a-plugin) handlers used inside the `setupNodeEvents` function of the cypress configuration.
 
-- `har` - an [HTTPArchive(HAR)](http://www.softwareishard.com/blog/har-12-spec/) object, recorded by the [HttpArchive Generator](https://github.com/NeuraLegion/cypress-har-generator).
+Here are collected the browser logs, and created the files with the collected information. The browser logs are accessed using the [Chrome DevTools Protocol](https://chromedevtools.github.io/devtools-protocol/) by connecting to the cypress browser using the remote debugging port. The result files are created in the `dump` folder relative to the cypress config file.
 
 - `meta` - [`RunContextData`](./packages/support/src/cy/runContext.ts) an object with the following fields:
+
  ```typescript
  {
  spec: string; // spec filename
@@ -28,16 +30,13 @@ The plugin generates a `json` file for each test into the `dump` folder inside t
 
 - `packages/cypress-debugger` - the plugin entry point. It exports the `debuggerSupport` and `debuggerPlugin` functions, required for plugin installation and a set of types used in the web application.
 
-- `packages/support` - exports the function that attaches handlers to [Cypress Events](https://docs.cypress.io/api/cypress-api/catalog-of-events). Here are made the following actions:
- - collect cypress events
- - collect [rrweb](https://www.npmjs.com/package/rrweb) events and match them with rrweb events
- - recording network events (using the [HAR generator cypress plugin](https://github.com/NeuraLegion/cypress-har-generator))
+- `packages/support` - exports the function that attaches handlers to [Cypress Events](https://docs.cypress.io/api/cypress-api/catalog-of-events). Here are made the following actions: - collect cypress events - collect [rrweb](https://www.npmjs.com/package/rrweb) events and match them with rrweb events - recording network events (using the [HAR generator cypress plugin](https://github.com/NeuraLegion/cypress-har-generator))
 
 - `packages/plugin` - exports a function that attaches [Cypress Plugin Events](https://docs.cypress.io/api/plugins/writing-a-plugin) handlers used inside the `setupNodeEvents` function of the cypress configuration. Here are collected the browser logs, and created the files with the collected information.
-The browser logs are accessed using the [Chrome DevTools Protocol](https://chromedevtools.github.io/devtools-protocol/) by connecting to the cypress browser using the remote debugging port.
-The result files are created in the `dump` folder relative to the cypress config file.
+ The browser logs are accessed using the [Chrome DevTools Protocol](https://chromedevtools.github.io/devtools-protocol/) by connecting to the cypress browser using the remote debugging port.
+ The result files are created in the `dump` folder relative to the cypress config file.
 - `apps/web` - the web application.
-The Web application is a basic UI created with [Vite](https://vitejs.dev/), [React](https://react.dev/) and [Typescript](https://www.typescriptlang.org/). It is a tool that helps to analyze the information from the files generated by the plugin. It also serves as an example for plugin integration.
+ The Web application is a basic UI created with [Vite](https://vitejs.dev/), [React](https://react.dev/) and [Typescript](https://www.typescriptlang.org/). It is a tool that helps to analyze the information from the files generated by the plugin. It also serves as an example for plugin integration.
 - `packages/eslint-config-custom` - shared [eslint](https://eslint.org/) configuration.
 
 - `packages/tsconfig` - shared [tsconfig](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html).
@@ -57,3 +56,84 @@ Runs a few tests
 cd apps/web
 npx cypress run --browser chrome
 ```
+
+## Data Structure
+
+The plugin generates a `json` file for each test into the `dump` folder inside the working directory. Each file contains the following fields:
+
+- `cy` - a list of cypress events. The data is collected from the cypress [`log:added`](https://docs.cypress.io/api/cypress-api/catalog-of-events) event.
+
+- `rr` - a list of [rrweb](https://www.npmjs.com/package/rrweb) records, which represents the mutations in the DOM. The entries are linked to `cy` events on cypress `log:added` and `log:changed` events.
+
+- `har` - an [HTTPArchive(HAR)](http://www.softwareishard.com/blog/har-12-spec/) object, recorded by the [HttpArchive Generator](https://github.com/NeuraLegion/cypress-har-generator).
+
+- `meta` - [`RunContextData`](./packages/support/src/cy/runContext.ts) an object with the following fields:
+
+ ```typescript
+ {
+ spec: string; // spec filename
+ test: string[]; // test title
+ retryAttempt: number; // https://docs.cypress.io/guides/guides/test-retries
+ }
+ ```
+
+- `browserLogs` - the browser logs collected using [chrome-remote-interface](https://www.npmjs.com/package/chrome-remote-interface).
+
+- `pluginMeta` - the data passed down to the optional `meta` field of the `debuggerPlugin` options argument.
+
+## Releasing
+
+The project uses [Changesets](https://github.com/changesets/changesets) to manage releases.
+
+### Beta channel
+
+When you want to do a prerelease, you need to enter prerelease mode. You can do that with the `pre enter <tag>`. The tag that you need to pass is used in versions(e.g. `1.0.0-beta.0`) and for the npm dist tag.
+
+Please check [Changesets Prereleases](https://github.com/changesets/changesets/blob/main/docs/prereleases.md) for reference.
+
+Enter prerelease mode and made the first prerelease
+
+```sh
+npx changeset pre enter beta
+npx changeset version
+git add .
+git commit -m "Enter prerelease mode and version packages"
+npx changeset publish
+git push --follow-tags
+```
+
+To add another prerelease, run:
+
+```sh
+npx changeset version
+git add .
+git commit -m "Version packages"
+npx changeset publish
+git push --follow-tags
+```
+
+To exit the prerelease mode and publish to latest:
+
+```sh
+npx changeset pre exit
+npx changeset version
+git add .
+git commit -m "Exit prerelease mode and version packages"
+npx changeset publish
+git push --follow-tags
+```
+
+### Latest channel
+
+```sh
+npx changeset publish
+```
+
+### Localhost
+
+```sh
+docker run -it --rm --name verdaccio -p 4873:4873 verdaccio/verdaccio
+npm adduser --registry http://localhost:4873
+npm login --registry http://localhost:4873
+npm_config_registry=http://localhost:4873 npx changeset publish
+```

README.md

@@ -12,7 +12,7 @@ The plugin captures all the information, saving it in a file that you can later
 ## Requirements
 
 - Cypress version 10+
-- NodeJS [14+](https://docs.cypress.io/guides/getting-started/installing-cypress#:~:text=If%20you're%20using%20npm,Node.js%2014.x)
+- NodeJS [^14.17.0](https://docs.cypress.io/guides/getting-started/installing-cypress#:~:text=If%20you're%20using%20npm,Node.js%2014.x)
 - Chromium family browsers only
 
 ## Setup
@@ -27,14 +27,14 @@ Add `cypress-debugger` to `cypress.config.{js|ts|mjs}`
 
 ```js
 // cypress.config.js
-const { defineConfig } = require("cypress");
-const { debuggerPlugin } = require("cypress-debugger");
+const { defineConfig } = require('cypress');
+const { debuggerPlugin } = require('cypress-debugger');
 module.exports = defineConfig({
  e2e: {
  setupNodeEvents(on, config) {
  debuggerPlugin(on, {
  meta: {
- key: "value",
+ key: 'value',
  },
  // path: abosulte path to the dump file
  // data: captured data
@@ -55,7 +55,7 @@ Add `cypress-debugger` to `cypress/support/e2e.{js|ts}`
 
 ```js
 // cypress/support/e2e.js
-const { debuggerSupport } = require("cypress-debugger");
+const { debuggerSupport } = require('cypress-debugger');
 debuggerSupport();
 ```
 
@@ -102,14 +102,14 @@ Example:
 
 ```js
 // cypress.config.js
-const { defineConfig } = require("cypress");
-const { debuggerPlugin } = require("cypress-debugger");
+const { defineConfig } = require('cypress');
+const { debuggerPlugin } = require('cypress-debugger');
 module.exports = defineConfig({
  e2e: {
  setupNodeEvents(on, config) {
  debuggerPlugin(on, {
  meta: {
- key: "value",
+ key: 'value',
  },
  callback: (path, data) => {
  console.log({ path, data });

apps/web/.eslintrc.js

@@ -1,4 +1,8 @@
 module.exports = {
- root: true,
- extends: ["custom"],
+ extends: ['custom/eslint-react'],
+ parserOptions: {
+ root: true,
+ tsconfigRootDir: __dirname,
+ project: ['./tsconfig.json'],
+ },
 };

apps/web/CHANGELOG.md

@@ -0,0 +1,12 @@
+# web
+
+## 1.0.0
+
+### Major Changes
+
+- First release
+
+### Patch Changes
+
+- Updated dependencies
+ - cypress-debugger@1.0.0

apps/web/cypress.config.ts → apps/web/cypress.config.js

@@ -1,19 +1,19 @@
-import { debuggerPlugin } from "@currents/cypress-debugger";
-import { defineConfig } from "cypress";
+const { defineConfig } = require('cypress');
+const { debuggerPlugin } = require('cypress-debugger');
 
 module.exports = defineConfig({
  e2e: {
- baseUrl: "https://todomvc.com/examples/backbone",
- specPattern: "cypress/e2e/*.spec.js",
- supportFile: "cypress/support/e2e.ts",
+ baseUrl: 'https://todomvc.com/examples/backbone',
+ specPattern: 'cypress/e2e/*.spec.js',
+ supportFile: 'cypress/support/e2e.ts',
  setupNodeEvents(on, config) {
  debuggerPlugin(on, {
  meta: {
- key: "value",
+ key: 'value',
  },
  callback: (file, data) => {
  // executed after each test
- console.log("results", {
+ console.log('results', {
  file,
  data,
  });
@@ -23,7 +23,7 @@ module.exports = defineConfig({
  return config;
  },
  },
- projectId: "9aOuF6",
+ projectId: '9aOuF6',
  video: true,
  videoUploadOnPasses: false,
 });