@describe-me/core 0.5.2 → 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.
Files changed (2) hide show
  1. package/README.md +52 -32
  2. package/package.json +6 -3
package/README.md CHANGED
@@ -1,48 +1,68 @@
1
1
  # @describe-me/core
2
2
 
3
- The framework-agnostic heart of [describe-me](https://github.com/grzehub/describe-me):
4
- the recorder that captures the DOM, the `step()` helper, and the JSON manifest
5
- types the viewer reads. Snapshots are serialized DOM via `rrweb-snapshot`, so
6
- nothing here knows about React.
3
+ **Your tests are your stories.** The recorder and the manifest types of
4
+ describe-me: living component documentation generated from the Vitest tests
5
+ you already have.
7
6
 
8
- Most people never install this package directly — `@describe-me/react` and
9
- `@describe-me/vitest` depend on it, and both re-export `step()`.
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
- ## Install
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.
12
16
 
13
- ```sh
14
- pnpm add -D @describe-me/core
15
- ```
17
+ Status: prototype. React 18 and 19, Vitest 4 and 5 in browser mode or jsdom,
18
+ static snapshots.
16
19
 
17
- All describe-me packages must be on the same version
18
- ([Add it to your project](https://github.com/grzehub/describe-me#add-it-to-your-project)).
20
+ ## Which package do I need
19
21
 
20
- ## Usage
22
+ | Package | What it is | Install it |
23
+ | --------------------- | ------------------------------------------- | ----------------------- |
24
+ | `describe-me` | the viewer and the `describe-me` CLI | 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 (this) | no, the others bring it |
21
28
 
22
- `step()` names a phase of a test. The DOM is captured after the body resolves,
23
- and the label becomes the frame's caption in the viewer.
29
+ ## Quick start
30
+
31
+ ```sh
32
+ pnpm add -D describe-me @describe-me/vitest @describe-me/react
33
+ ```
24
34
 
25
35
  ```ts
26
- import { step } from '@describe-me/core'
36
+ // vitest.config.ts
37
+ import { describeMe } from '@describe-me/vitest/plugin'
27
38
 
28
- await step('open the menu', () => screen.getByRole('button', { name: 'Menu' }).click())
39
+ export default defineConfig({
40
+ plugins: [react(), describeMe()],
41
+ test: { environment: 'jsdom' }, // or your browser-mode settings
42
+ })
29
43
  ```
30
44
 
31
- `elementLabel()` names a DOM element the way frame labels do, e.g.
32
- `button "Save"`, for adapters that record their own interactions.
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
51
+
52
+ The framework-agnostic heart of describe-me. Snapshots are serialized DOM via
53
+ `rrweb-snapshot`, so nothing here knows about React. You need it directly only
54
+ to write an adapter for another framework or to read the output yourself.
55
+
56
+ | Entry point | What it holds |
57
+ | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
58
+ | [`@describe-me/core`](https://grzehub.github.io/describe-me/api.html#entry-core) | `step()`, `recorder` and `elementLabel()`, for adapters |
59
+ | [`@describe-me/core/types`](https://grzehub.github.io/describe-me/api.html#entry-core-types) | the types of `.describe-me/manifest.json` |
60
+ | [`@describe-me/core/diagnostics`](https://grzehub.github.io/describe-me/api.html#entry-core-diagnostics) | what a manifest could not document |
61
+ | [`@describe-me/core/css-references`](https://grzehub.github.io/describe-me/api.html#entry-core-css-references) | the `url()` and `@import` references in CSS text |
33
62
 
34
- Such adapters call `recorder.beforeInteraction()` before they change the page,
35
- so a deferred render frame is taken first. As the capture's `generation`, they
36
- pass `recorder.generation`, read when the interaction began, so a capture that
37
- outlives its test is dropped. `recorder.flush()` waits for the captures in
38
- flight and takes a deferred render frame.
63
+ [How it works](https://grzehub.github.io/describe-me/how-it-works.html) explains
64
+ the recorder and the output directory.
39
65
 
40
- The manifest types live in `@describe-me/core/types`, for tools that want to
41
- read `.describe-me/manifest.json` themselves. Stored snapshots point into
42
- `assets/` and `styles/` through `ASSET_URL_PREFIX` and `STYLE_URL_PREFIX`
43
- ([Output directory](https://github.com/grzehub/describe-me#output-directory) in
44
- the root README). `@describe-me/core/css-references` lists the `url()` and
45
- `@import` references in CSS text.
66
+ ## License
46
67
 
47
- See the [root README](https://github.com/grzehub/describe-me#readme) for the
48
- full picture.
68
+ MIT
package/package.json CHANGED
@@ -1,12 +1,15 @@
1
1
  {
2
2
  "name": "@describe-me/core",
3
- "version": "0.5.2",
4
- "description": "Recorder and manifest types for describe-me: living component docs from your tests",
3
+ "version": "0.5.4",
4
+ "description": "Living component documentation from your Vitest tests: the recorder and manifest types of describe-me",
5
5
  "keywords": [
6
6
  "vitest",
7
+ "react",
7
8
  "storybook",
9
+ "storybook alternative",
8
10
  "component documentation",
9
- "visual testing",
11
+ "living documentation",
12
+ "jsdom",
10
13
  "testing"
11
14
  ],
12
15
  "license": "MIT",