afterbefore 0.1.0 → 0.1.2
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/LICENSE +143 -21
- package/README.md +4 -112
- package/dist/cli.js +1258 -266
- package/dist/cli.js.map +1 -1
- package/dist/index.d.ts +74 -2
- package/dist/index.js +1209 -236
- package/dist/index.js.map +1 -1
- package/package.json +6 -7
package/LICENSE
CHANGED
|
@@ -1,21 +1,143 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
1
|
+
PolyForm Shield License 1.0.0
|
|
2
|
+
|
|
3
|
+
<https://polyformproject.org/licenses/shield/1.0.0>
|
|
4
|
+
|
|
5
|
+
Copyright (c) 2026 Paulius Kairevicius
|
|
6
|
+
|
|
7
|
+
Acceptance
|
|
8
|
+
|
|
9
|
+
In order to get any license under these terms, you must agree to them as
|
|
10
|
+
both strict obligations and conditions to all your licenses.
|
|
11
|
+
|
|
12
|
+
Copyright License
|
|
13
|
+
|
|
14
|
+
The licensor grants you a copyright license for the software to do
|
|
15
|
+
everything you might do with the software that would otherwise infringe
|
|
16
|
+
the licensor's copyright in it for any permitted purpose. However, you
|
|
17
|
+
may only distribute the software according to Distribution License and
|
|
18
|
+
make changes or new works based on the software according to Changes and
|
|
19
|
+
New Works License.
|
|
20
|
+
|
|
21
|
+
Distribution License
|
|
22
|
+
|
|
23
|
+
The licensor grants you an additional copyright license to distribute
|
|
24
|
+
copies of the software. Your license to distribute covers distributing
|
|
25
|
+
the software with changes and new works permitted by Changes and New
|
|
26
|
+
Works License.
|
|
27
|
+
|
|
28
|
+
Notices
|
|
29
|
+
|
|
30
|
+
You must ensure that anyone who gets a copy of any part of the software
|
|
31
|
+
from you also gets a copy of these terms or the URL for them above, as
|
|
32
|
+
well as copies of any plain-text lines beginning with "Required Notice:"
|
|
33
|
+
that the licensor provided with the software.
|
|
34
|
+
|
|
35
|
+
Changes and New Works License
|
|
36
|
+
|
|
37
|
+
The licensor grants you an additional copyright license to make changes
|
|
38
|
+
and new works based on the software for any permitted purpose.
|
|
39
|
+
|
|
40
|
+
Patent License
|
|
41
|
+
|
|
42
|
+
The licensor grants you a patent license for the software that covers
|
|
43
|
+
patent claims the licensor can license, or becomes able to license, that
|
|
44
|
+
you would infringe by using the software.
|
|
45
|
+
|
|
46
|
+
Noncompete
|
|
47
|
+
|
|
48
|
+
Any purpose is a permitted purpose, except for providing any product
|
|
49
|
+
that competes with the software or any product the licensor or any of
|
|
50
|
+
its affiliates provides using the software.
|
|
51
|
+
|
|
52
|
+
Competition
|
|
53
|
+
|
|
54
|
+
Goods and services compete even when they provide functionality through
|
|
55
|
+
different kinds of interfaces or for different technical platforms.
|
|
56
|
+
Applications can compete with services, libraries with plugins,
|
|
57
|
+
frameworks with development tools, and so on, even if they're written in
|
|
58
|
+
different programming languages or for different computer architectures.
|
|
59
|
+
Goods and services compete even when provided free of charge. If you
|
|
60
|
+
market a product as a practical substitute for the software or another
|
|
61
|
+
product, it definitely competes.
|
|
62
|
+
|
|
63
|
+
New Products
|
|
64
|
+
|
|
65
|
+
If you are using the software to provide a product that does not
|
|
66
|
+
compete, but the licensor or any of its affiliates brings your product
|
|
67
|
+
into competition by providing a new version of the software or another
|
|
68
|
+
product using the software, you may continue using versions of the
|
|
69
|
+
software available under these terms beforehand to provide your
|
|
70
|
+
competing product, but not any later versions.
|
|
71
|
+
|
|
72
|
+
Discontinued Products
|
|
73
|
+
|
|
74
|
+
You may begin using the software to compete with a product or service
|
|
75
|
+
that the licensor or any of its affiliates has stopped providing, unless
|
|
76
|
+
the licensor includes a plain-text line beginning with "Licensor Line of
|
|
77
|
+
Business:" with the software that mentions that line of business.
|
|
78
|
+
|
|
79
|
+
Sales of Business
|
|
80
|
+
|
|
81
|
+
If the licensor or any of its affiliates sells a line of business
|
|
82
|
+
developing the software or using the software to provide a product, the
|
|
83
|
+
buyer can also enforce Noncompete for that product.
|
|
84
|
+
|
|
85
|
+
Fair Use
|
|
86
|
+
|
|
87
|
+
You may have "fair use" rights for the software under the law. These
|
|
88
|
+
terms do not limit them.
|
|
89
|
+
|
|
90
|
+
No Other Rights
|
|
91
|
+
|
|
92
|
+
These terms do not allow you to sublicense or transfer any of your
|
|
93
|
+
licenses to anyone else, or prevent the licensor from granting licenses
|
|
94
|
+
to anyone else. These terms do not imply any other licenses.
|
|
95
|
+
|
|
96
|
+
Patent Defense
|
|
97
|
+
|
|
98
|
+
If you make any written claim that the software infringes or contributes
|
|
99
|
+
to infringement of any patent, your patent license for the software
|
|
100
|
+
granted under these terms ends immediately. If your company makes such a
|
|
101
|
+
claim, your patent license ends immediately for work on behalf of your
|
|
102
|
+
company.
|
|
103
|
+
|
|
104
|
+
Violations
|
|
105
|
+
|
|
106
|
+
The first time you are notified in writing that you have violated any of
|
|
107
|
+
these terms, or done anything with the software not covered by your
|
|
108
|
+
licenses, your licenses can nonetheless continue if you come into full
|
|
109
|
+
compliance with these terms, and take practical steps to correct past
|
|
110
|
+
violations, within 32 days of receiving notice. Otherwise, all your
|
|
111
|
+
licenses end immediately.
|
|
112
|
+
|
|
113
|
+
No Liability
|
|
114
|
+
|
|
115
|
+
As far as the law allows, the software comes as is, without any warranty
|
|
116
|
+
or condition, and the licensor will not be liable to you for any damages
|
|
117
|
+
arising out of these terms or the use or nature of the software, under
|
|
118
|
+
any kind of legal claim.
|
|
119
|
+
|
|
120
|
+
Definitions
|
|
121
|
+
|
|
122
|
+
The licensor is the individual or entity offering these terms, and the
|
|
123
|
+
software is the software the licensor makes available under these terms.
|
|
124
|
+
|
|
125
|
+
A product can be a good or service, or a combination of them.
|
|
126
|
+
|
|
127
|
+
You refers to the individual or entity agreeing to these terms.
|
|
128
|
+
|
|
129
|
+
Your company is any legal entity, sole proprietorship, or other kind of
|
|
130
|
+
organization that you work for, plus all its affiliates.
|
|
131
|
+
|
|
132
|
+
Affiliates means the other organizations than an organization has
|
|
133
|
+
control over, is under the control of, or is under common control with.
|
|
134
|
+
|
|
135
|
+
Control means ownership of substantially all the assets of an entity, or
|
|
136
|
+
the power to direct its management and policies by vote, contract, or
|
|
137
|
+
otherwise. Control can be direct or indirect.
|
|
138
|
+
|
|
139
|
+
Your licenses are all the licenses granted to you for the software under
|
|
140
|
+
these terms.
|
|
141
|
+
|
|
142
|
+
Use means anything you do with the software requiring one of your
|
|
143
|
+
licenses.
|
package/README.md
CHANGED
|
@@ -1,122 +1,14 @@
|
|
|
1
1
|
# afterbefore
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/afterbefore)
|
|
4
|
+
[](https://www.npmjs.com/package/afterbefore)
|
|
4
5
|
|
|
5
|
-
|
|
6
|
+
Automatic before/after screenshot capture for Next.js pull requests. The git diff is the config.
|
|
6
7
|
|
|
7
8
|
```bash
|
|
8
9
|
npx afterbefore
|
|
9
10
|
```
|
|
10
11
|
|
|
11
|
-
## The Problem
|
|
12
|
-
|
|
13
|
-
Visual PR reviews are painful:
|
|
14
|
-
|
|
15
|
-
1. Switch to main, start the app, take screenshots
|
|
16
|
-
2. Switch back to your branch, start the app, take more screenshots
|
|
17
|
-
3. Crop, label, and paste into the PR description
|
|
18
|
-
|
|
19
|
-
This takes 5-10 minutes. Most developers skip it. Reviewers approve visual changes blind.
|
|
20
|
-
|
|
21
|
-
## How It Works
|
|
22
|
-
|
|
23
|
-
```
|
|
24
|
-
git diff → classify changed files → build import graph → BFS to find affected pages
|
|
25
|
-
→ git worktree for base version → start 2 dev servers → Playwright capture
|
|
26
|
-
→ pixelmatch diff → side-by-side comparison → HTML report + PR comment
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
1. **Diff** — reads `git diff --name-status` to find changed files
|
|
30
|
-
2. **Classify** — categorizes as page, component, style, layout, utility, config, test
|
|
31
|
-
3. **Import graph** — parses all imports with `es-module-lexer`, resolves `@/` tsconfig aliases
|
|
32
|
-
4. **Impact analysis** — BFS traverses the reverse import graph (depth 3) to find affected pages
|
|
33
|
-
5. **Worktree** — creates a git worktree for the base branch, installs deps
|
|
34
|
-
6. **Dev servers** — starts two Next.js dev servers (before + after) on random ports
|
|
35
|
-
7. **Capture** — Playwright takes full-page screenshots at 1280x720 for each affected route
|
|
36
|
-
8. **Compare** — pixelmatch detects pixel-level differences, sharp generates side-by-side images
|
|
37
|
-
9. **Report** — HTML card grid, drag-to-compare sliders, markdown summary, optional PR comment
|
|
38
|
-
|
|
39
|
-
## Installation
|
|
40
|
-
|
|
41
|
-
```bash
|
|
42
|
-
# npm
|
|
43
|
-
npm install --save-dev afterbefore
|
|
44
|
-
|
|
45
|
-
# From GitHub (builds automatically on install)
|
|
46
|
-
npm install --save-dev github:kairevicius/afterbefore
|
|
47
|
-
|
|
48
|
-
# Or run directly without installing
|
|
49
|
-
npx afterbefore
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
Playwright's Chromium browser is required for screenshots:
|
|
53
|
-
|
|
54
|
-
```bash
|
|
55
|
-
npx playwright install chromium
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
## Usage
|
|
59
|
-
|
|
60
|
-
```bash
|
|
61
|
-
# Compare current branch against main
|
|
62
|
-
npx afterbefore
|
|
63
|
-
|
|
64
|
-
# Compare against a different base
|
|
65
|
-
npx afterbefore --base develop
|
|
66
|
-
|
|
67
|
-
# Capture and post results to the open PR
|
|
68
|
-
npx afterbefore --post
|
|
69
|
-
```
|
|
70
|
-
|
|
71
|
-
### Options
|
|
72
|
-
|
|
73
|
-
| Flag | Description | Default |
|
|
74
|
-
|------|-------------|---------|
|
|
75
|
-
| `--base <ref>` | Base branch or ref to compare against | `main` |
|
|
76
|
-
| `--output <dir>` | Output directory | `.afterbefore` |
|
|
77
|
-
| `--post` | Post results as a PR comment via `gh` CLI | `false` |
|
|
78
|
-
|
|
79
|
-
## Output
|
|
80
|
-
|
|
81
|
-
```
|
|
82
|
-
.afterbefore/
|
|
83
|
-
summary.md Markdown table (for PR comments)
|
|
84
|
-
index.html HTML report with card grid
|
|
85
|
-
_root/
|
|
86
|
-
before.png Screenshot of / on base branch
|
|
87
|
-
after.png Screenshot of / on current branch
|
|
88
|
-
diff.png Pixel diff overlay
|
|
89
|
-
side-by-side.png Labeled comparison image
|
|
90
|
-
slider.html Interactive drag-to-compare
|
|
91
|
-
about/
|
|
92
|
-
before.png
|
|
93
|
-
after.png
|
|
94
|
-
diff.png
|
|
95
|
-
side-by-side.png
|
|
96
|
-
slider.html
|
|
97
|
-
```
|
|
98
|
-
|
|
99
|
-
Open `index.html` in a browser to see all comparisons at a glance. Each changed route gets a card with before/after/diff images and a link to the interactive slider.
|
|
100
|
-
|
|
101
|
-
## Requirements
|
|
102
|
-
|
|
103
|
-
- Node.js 18+
|
|
104
|
-
- Git
|
|
105
|
-
- Next.js project using the app router
|
|
106
|
-
- Playwright Chromium (`npx playwright install chromium`)
|
|
107
|
-
|
|
108
|
-
## How It's Different
|
|
109
|
-
|
|
110
|
-
Every visual regression tool either captures everything on every run (Chromatic, Lost Pixel) or requires manual URL configuration (Percy, BackstopJS). `afterbefore` is the only tool that figures out what to capture from the code diff.
|
|
111
|
-
|
|
112
|
-
| | Visual regression tools | afterbefore |
|
|
113
|
-
|---|---|---|
|
|
114
|
-
| Config | URL lists, story lists | Zero — reads git diff |
|
|
115
|
-
| Scope | Everything, every run | Only affected pages |
|
|
116
|
-
| Philosophy | "Did anything break?" | "Here's what changed" |
|
|
117
|
-
| Hosting | Cloud SaaS | Local, nothing leaves your machine |
|
|
118
|
-
| Cost | Per-snapshot pricing | Free, open source |
|
|
119
|
-
|
|
120
12
|
## License
|
|
121
13
|
|
|
122
|
-
|
|
14
|
+
Licensed under [PolyForm Shield 1.0.0](https://polyformproject.org/licenses/shield/1.0.0)
|