describe-me 0.5.3 → 0.5.4
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 +54 -44
- package/package.json +7 -4
package/README.md
CHANGED
|
@@ -1,59 +1,69 @@
|
|
|
1
1
|
# describe-me
|
|
2
2
|
|
|
3
|
-
The viewer and
|
|
4
|
-
living component documentation generated from the Vitest tests
|
|
5
|
-
|
|
6
|
-
you can scrub through.
|
|
3
|
+
**Your tests are your stories.** The viewer and the `describe-me` CLI of
|
|
4
|
+
describe-me: living component documentation generated from the Vitest tests
|
|
5
|
+
you already have.
|
|
7
6
|
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
**[Read the docs](https://grzehub.github.io/describe-me/)** · open the viewer
|
|
8
|
+
of the [browser-mode example](https://grzehub.github.io/describe-me/examples/react-browser/)
|
|
9
|
+
or the [jsdom example](https://grzehub.github.io/describe-me/examples/react-jsdom/)
|
|
10
|
+
· [Limitations](https://grzehub.github.io/describe-me/limitations.html)
|
|
10
11
|
|
|
11
|
-
|
|
12
|
+
describe-me captures the DOM after each step of a test and shows the result as
|
|
13
|
+
a browsable catalog. `describe` blocks become the sidebar, each `it` is a
|
|
14
|
+
story, and each step is a frame you can scrub through. Stories cannot rot,
|
|
15
|
+
because they are tests. If one drifts from the component, CI goes red.
|
|
16
|
+
|
|
17
|
+
Status: prototype. React 18 and 19, Vitest 4 and 5 in browser mode or jsdom,
|
|
18
|
+
static snapshots.
|
|
19
|
+
|
|
20
|
+
## Which package do I need
|
|
21
|
+
|
|
22
|
+
| Package | What it is | Install it |
|
|
23
|
+
| --------------------- | ------------------------------------------- | ----------------------- |
|
|
24
|
+
| `describe-me` | the viewer and the `describe-me` CLI (this) | yes |
|
|
25
|
+
| `@describe-me/vitest` | the Vitest plugin, setup files and reporter | yes |
|
|
26
|
+
| `@describe-me/react` | `render` functions that record frames | yes |
|
|
27
|
+
| `@describe-me/core` | the recorder and the manifest types | no, the others bring it |
|
|
28
|
+
|
|
29
|
+
## Quick start
|
|
12
30
|
|
|
13
31
|
```sh
|
|
14
32
|
pnpm add -D describe-me @describe-me/vitest @describe-me/react
|
|
15
33
|
```
|
|
16
34
|
|
|
17
|
-
|
|
18
|
-
|
|
35
|
+
```ts
|
|
36
|
+
// vitest.config.ts
|
|
37
|
+
import { describeMe } from '@describe-me/vitest/plugin'
|
|
19
38
|
|
|
20
|
-
|
|
21
|
-
(
|
|
39
|
+
export default defineConfig({
|
|
40
|
+
plugins: [react(), describeMe()],
|
|
41
|
+
test: { environment: 'jsdom' }, // or your browser-mode settings
|
|
42
|
+
})
|
|
43
|
+
```
|
|
22
44
|
|
|
23
|
-
|
|
45
|
+
Run your tests, then `describe-me dev` opens the viewer.
|
|
46
|
+
[Getting started](https://grzehub.github.io/describe-me/getting-started.html)
|
|
47
|
+
walks through both environments. Keep all describe-me packages on one version
|
|
48
|
+
([why](https://grzehub.github.io/describe-me/installation.html#lockstep)).
|
|
49
|
+
|
|
50
|
+
## This package
|
|
24
51
|
|
|
25
52
|
```sh
|
|
26
|
-
describe-me dev # viewer
|
|
27
|
-
describe-me build --out docs #
|
|
53
|
+
describe-me dev # the viewer, live while vitest --watch runs
|
|
54
|
+
describe-me build --out docs # a static site: the viewer and its data
|
|
28
55
|
```
|
|
29
56
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
the docs show them offline. Adobe Fonts stay remote, because their license
|
|
44
|
-
does not allow self-hosting, and so do fonts on any other host. The build
|
|
45
|
-
lists both.
|
|
46
|
-
|
|
47
|
-
This needs the network. By default `build` connects to Google Fonts, Bunny
|
|
48
|
-
Fonts and jsDelivr when the data loads fonts from them and the cache has no
|
|
49
|
-
fresh copy. Downloads are cached in `node_modules/.cache/describe-me/fonts`,
|
|
50
|
-
so after one online build later builds run offline. An unreachable host costs
|
|
51
|
-
up to about 10 s once, then it is skipped. A font that does not download keeps
|
|
52
|
-
loading from the network, and the build never fails because of it.
|
|
53
|
-
`--no-vendor-fonts` keeps the build off the network, for CI without network
|
|
54
|
-
access or with privacy rules.
|
|
55
|
-
|
|
56
|
-
The static site uses relative URLs, so it works from a sub-path such as
|
|
57
|
-
GitHub Pages.
|
|
58
|
-
|
|
59
|
-
See the [docs](https://grzehub.github.io/describe-me/) for the full picture.
|
|
57
|
+
`build` writes a site with relative URLs, so it works under a sub-path such as
|
|
58
|
+
GitHub Pages. It needs a web server and does not open from disk. It also
|
|
59
|
+
downloads web fonts from Google Fonts, Bunny Fonts and Fontsource into the
|
|
60
|
+
site, so it shows them offline.
|
|
61
|
+
[Viewer and CLI](https://grzehub.github.io/describe-me/viewer.html) lists every
|
|
62
|
+
flag and what the viewer can do.
|
|
63
|
+
|
|
64
|
+
`vite` is a peer dependency, which pnpm and npm install on their own. With
|
|
65
|
+
yarn, add it to your `devDependencies`.
|
|
66
|
+
|
|
67
|
+
## License
|
|
68
|
+
|
|
69
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "describe-me",
|
|
3
|
-
"version": "0.5.
|
|
4
|
-
"description": "Living component documentation
|
|
3
|
+
"version": "0.5.4",
|
|
4
|
+
"description": "Living component documentation from your Vitest tests: the viewer and CLI of describe-me",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"vitest",
|
|
7
|
+
"react",
|
|
7
8
|
"storybook",
|
|
9
|
+
"storybook alternative",
|
|
8
10
|
"component documentation",
|
|
9
|
-
"
|
|
11
|
+
"living documentation",
|
|
12
|
+
"jsdom",
|
|
10
13
|
"testing",
|
|
11
14
|
"cli"
|
|
12
15
|
],
|
|
@@ -42,7 +45,7 @@
|
|
|
42
45
|
"sideEffects": false,
|
|
43
46
|
"dependencies": {
|
|
44
47
|
"rrweb-snapshot": "^2.1.6",
|
|
45
|
-
"@describe-me/core": "^0.5.
|
|
48
|
+
"@describe-me/core": "^0.5.4"
|
|
46
49
|
},
|
|
47
50
|
"peerDependencies": {
|
|
48
51
|
"vite": "^6.4.0 || ^7.0.0 || ^8.0.0"
|