afterbefore 0.1.17 → 0.1.19

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 CHANGED
@@ -17,7 +17,7 @@ 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, and diffs them pixel by pixel.
20
+ It spins up two dev servers (your branch and the base branch) and captures screenshots of affected routes.
21
21
 
22
22
  Output lands in `.afterbefore/`:
23
23
 
@@ -25,10 +25,7 @@ Output lands in `.afterbefore/`:
25
25
  .afterbefore/
26
26
  └── feature-branch_2026-02-26/
27
27
  ├── about-before.png
28
- ├── about-after.png
29
- ├── about-diff.png
30
- ├── about-compare.png
31
- └── about-slider.html # interactive slider
28
+ └── about-after.png
32
29
  ```
33
30
 
34
31
  ## How it works
@@ -38,9 +35,7 @@ Output lands in `.afterbefore/`:
38
35
  3. Builds an import graph by parsing ES module imports across your codebase
39
36
  4. Walks the graph backward from each changed file to find which `page.tsx` files are affected
40
37
  5. Creates a git worktree for the base branch and runs `npm install`
41
- 6. Starts two Next.js dev servers in parallel (base branch + current branch)
42
- 7. Captures full-page screenshots of each affected route on both servers using Playwright
43
- 8. Compares screenshots with pixelmatch and generates diff images
38
+ 6. Starts two Next.js dev servers in parallel (base branch + current branch) and captures full-page screenshots of each affected route using Playwright
44
39
 
45
40
  Layouts work the same way. Edit `app/dashboard/layout.tsx` and it captures every page under `app/dashboard/`.
46
41
 
@@ -52,33 +47,13 @@ If only global files changed (like `globals.css` or `tailwind.config.ts`) and no
52
47
  |------|---------|-------------|
53
48
  | `--base <ref>` | `main` | Base branch to compare against |
54
49
  | `--output <dir>` | `.afterbefore` | Output directory |
55
- | `--post` | `false` | Post results as a GitHub PR comment |
56
- | `--threshold <percent>` | `0.1` | Ignore diffs below this percentage |
57
50
  | `--max-routes <count>` | `6` | Cap the number of routes captured (0 = unlimited) |
58
51
  | `--width <pixels>` | `1280` | Viewport width |
59
52
  | `--height <pixels>` | `720` | Viewport height |
60
- | `--device <name>` | — | Playwright device, e.g. `"iPhone 14"` |
61
53
  | `--delay <ms>` | `0` | Extra wait time after page load |
62
- | `--no-auto-tabs` | | Disable auto-detection of ARIA tab states |
63
- | `--max-tabs <count>` | `5` | Max tabs to capture per route |
64
- | `--auto-sections` | `false` | Capture heading-labeled sections individually |
65
- | `--max-sections <count>` | `10` | Max sections per page state |
66
-
67
- ## Post to PR
68
-
69
- The `--post` flag uses the GitHub CLI (`gh`) to add a comment to your open pull request with a markdown summary of the results. On subsequent runs, it updates the same comment instead of creating a new one.
70
-
71
- ```bash
72
- npx afterbefore --post
73
- ```
74
-
75
- You need `gh` installed and authenticated.
76
-
77
- ## Auto-detection
78
-
79
- **Tabs.** If a page has ARIA tab controls (`role="tablist"` and `role="tab"`), afterbefore clicks through each tab and captures the state. This is on by default. Disable it with `--no-auto-tabs`.
80
-
81
- **Sections.** With `--auto-sections`, pages with 3+ headings get captured section by section. Each heading-labeled section is matched by text between before and after, so you can see exactly which section changed.
54
+ | `--max-depth <n>` | `10` | Max import graph traversal depth |
55
+ | `--dry-run` | `false` | Show affected routes without capturing |
56
+ | `--verbose` | `false` | Show detailed import graph traversal |
82
57
 
83
58
  ## Configuration file
84
59
 
@@ -102,8 +77,6 @@ For pages that need interaction before capture (opening a modal, clicking a drop
102
77
 
103
78
  Actions run in order before the screenshot is taken. Supported actions: `click` (CSS selector), `scroll` (CSS selector), `wait` (milliseconds).
104
79
 
105
- When scenarios are defined for a route, auto-tabs are disabled for that route.
106
-
107
80
  ## Requirements
108
81
 
109
82
  - Next.js with the app router (`app/` directory)