afterbefore 0.1.6 → 0.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -12
- package/dist/cli.js +279 -296
- package/dist/cli.js.map +1 -1
- package/dist/index.d.ts +2 -65
- package/dist/index.js +276 -292
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# afterbefore
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/package/afterbefore)
|
|
4
|
-
[](https://www.npmjs.com/package/afterbefore)
|
|
5
5
|
|
|
6
6
|
Automatic before/after screenshot capture for Next.js pull requests.
|
|
7
7
|
|
|
@@ -17,15 +17,13 @@ Run it from a feature branch in any Next.js app router project:
|
|
|
17
17
|
npx afterbefore
|
|
18
18
|
```
|
|
19
19
|
|
|
20
|
-
It spins up two dev servers (your branch and the base branch), captures screenshots of affected routes, diffs them pixel by pixel
|
|
20
|
+
It spins up two dev servers (your branch and the base branch), captures screenshots of affected routes, and diffs them pixel by pixel.
|
|
21
21
|
|
|
22
22
|
Output lands in `.afterbefore/`:
|
|
23
23
|
|
|
24
24
|
```
|
|
25
25
|
.afterbefore/
|
|
26
26
|
└── feature-branch_2026-02-26/
|
|
27
|
-
├── index.html # visual report
|
|
28
|
-
├── summary.md # markdown table
|
|
29
27
|
├── about-before.png
|
|
30
28
|
├── about-after.png
|
|
31
29
|
├── about-diff.png
|
|
@@ -33,12 +31,6 @@ Output lands in `.afterbefore/`:
|
|
|
33
31
|
└── about-slider.html # interactive slider
|
|
34
32
|
```
|
|
35
33
|
|
|
36
|
-
Open the report automatically:
|
|
37
|
-
|
|
38
|
-
```bash
|
|
39
|
-
npx afterbefore --open
|
|
40
|
-
```
|
|
41
|
-
|
|
42
34
|
## How it works
|
|
43
35
|
|
|
44
36
|
1. Reads `git diff` to find changed files
|
|
@@ -49,7 +41,6 @@ npx afterbefore --open
|
|
|
49
41
|
6. Starts two Next.js dev servers in parallel (base branch + current branch)
|
|
50
42
|
7. Captures full-page screenshots of each affected route on both servers using Playwright
|
|
51
43
|
8. Compares screenshots with pixelmatch and generates diff images
|
|
52
|
-
9. Builds an HTML report with side-by-side comparisons and interactive sliders
|
|
53
44
|
|
|
54
45
|
Layouts work the same way. Edit `app/dashboard/layout.tsx` and it captures every page under `app/dashboard/`.
|
|
55
46
|
|
|
@@ -64,7 +55,6 @@ If only global files changed (like `globals.css` or `tailwind.config.ts`) and no
|
|
|
64
55
|
| `--post` | `false` | Post results as a GitHub PR comment |
|
|
65
56
|
| `--threshold <percent>` | `0.1` | Ignore diffs below this percentage |
|
|
66
57
|
| `--max-routes <count>` | `6` | Cap the number of routes captured (0 = unlimited) |
|
|
67
|
-
| `--open` | `false` | Open the HTML report in your browser |
|
|
68
58
|
| `--width <pixels>` | `1280` | Viewport width |
|
|
69
59
|
| `--height <pixels>` | `720` | Viewport height |
|
|
70
60
|
| `--device <name>` | — | Playwright device, e.g. `"iPhone 14"` |
|