@sightmap/react 0.2.0
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 +21 -0
- package/README.md +173 -0
- package/dist/cli/index.d.ts +1 -0
- package/dist/cli/index.js +1141 -0
- package/dist/cli/index.js.map +1 -0
- package/dist/index.d.ts +17 -0
- package/dist/index.js +201 -0
- package/dist/index.js.map +1 -0
- package/dist/plugin/adapters/rr7-declarative.d.ts +6 -0
- package/dist/plugin/adapters/rr7-declarative.js +315 -0
- package/dist/plugin/adapters/rr7-declarative.js.map +1 -0
- package/dist/plugin/adapters/rr7-framework.d.ts +7 -0
- package/dist/plugin/adapters/rr7-framework.js +235 -0
- package/dist/plugin/adapters/rr7-framework.js.map +1 -0
- package/dist/router-adapter-CsmLmHVQ.d.ts +29 -0
- package/dist/runtime-types.d.ts +51 -0
- package/dist/runtime-types.js +1 -0
- package/dist/runtime-types.js.map +1 -0
- package/dist/vite.d.ts +11 -0
- package/dist/vite.js +38 -0
- package/dist/vite.js.map +1 -0
- package/package.json +92 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Fullstory, Inc.
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
# @sightmap/react
|
|
2
|
+
|
|
3
|
+
React framework adapter for the [Sightmap](https://sightmap.org) spec.
|
|
4
|
+
|
|
5
|
+
Mount one provider; an agent does the rest.
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
pnpm add @sightmap/react @sightmap/sightmap
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
`@sightmap/sightmap` is a peer dep — installed alongside.
|
|
14
|
+
|
|
15
|
+
## Use
|
|
16
|
+
|
|
17
|
+
### 1. Bootstrap your `.sightmap/` from source
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
# scan your react-router 7 routes + data-sightmap props
|
|
21
|
+
# and scaffold .sightmap/<feature>.yaml files
|
|
22
|
+
pnpm sightmap-react gen
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
`gen` walks your router config, finds any `data-sightmap="..."` props in source, and writes feature-scoped YAML files to `.sightmap/` — one per top-level route. Re-run any time routes or selectors change; agent-authored fields (`memory`, intent, requests) are preserved.
|
|
26
|
+
|
|
27
|
+
#### First run
|
|
28
|
+
|
|
29
|
+
Running `sightmap-react gen` against a project with no `.sightmap/` directory does three things:
|
|
30
|
+
|
|
31
|
+
1. AST-scans your source for `data-sightmap` attributes and reads your React Router config to discover routes.
|
|
32
|
+
2. Writes per-feature YAML files under `.sightmap/` (one file per feature group of routes), each seeded with:
|
|
33
|
+
- **Structural fields** the codegen owns: view name, route pattern, component selectors.
|
|
34
|
+
- **Commented TODO blocks** for the agent-authored fields the codegen does NOT own: `memory`, `intent`, `requests`. These are YAML comments — the file parses cleanly until you uncomment and fill them in.
|
|
35
|
+
3. Prints a summary listing the views written, components linked, and the suggested first-edit targets.
|
|
36
|
+
|
|
37
|
+
Re-running `gen` is idempotent: structural fields refresh from source, agent-authored fields are preserved, and the TODO scaffolding is **not** re-emitted into files that already exist (per the codegen spec in `docs/superpowers/specs/2026-05-08-react-sdk-bootstrap-codegen.md`).
|
|
38
|
+
|
|
39
|
+
Two-minute walkthrough:
|
|
40
|
+
|
|
41
|
+
```bash
|
|
42
|
+
# In a fresh RR7 project root:
|
|
43
|
+
npx sightmap-react gen
|
|
44
|
+
# → wrote N file(s) (first run on empty .sightmap/)
|
|
45
|
+
# → Views (N total)
|
|
46
|
+
# → views: Login, Dashboard, ...
|
|
47
|
+
# → Next steps — open these files and replace the TODO blocks with real values:
|
|
48
|
+
# → - .sightmap/login.yaml
|
|
49
|
+
# → - .sightmap/dashboard.yaml
|
|
50
|
+
# → Run /sightmap:audit (Claude Code plugin) to surface missing memory and broken selectors.
|
|
51
|
+
|
|
52
|
+
# Open the first suggested file. Replace the commented TODO blocks with real values:
|
|
53
|
+
$EDITOR .sightmap/login.yaml
|
|
54
|
+
|
|
55
|
+
# Re-run any time you change routes or add data-sightmap attributes:
|
|
56
|
+
npx sightmap-react gen
|
|
57
|
+
# → sightmap: up to date (or a list of structural changes only)
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
#### `--live <url>` (optional)
|
|
61
|
+
|
|
62
|
+
If you have `sightmap-react`'s dev middleware running at `http://localhost:5173/__sightmap__/sightmap.json`, pass `--live <url>` to additionally fetch the runtime snapshot. Views present at runtime but not discovered by the static AST scan are surfaced as `react.live-only-view` info diagnostics — `gen` does not auto-emit YAML for them; the curator hand-authors a file per the diagnostic's hint.
|
|
63
|
+
|
|
64
|
+
The static path is the source of truth for codegen. `--live` is a discovery aid, not a parallel write path.
|
|
65
|
+
|
|
66
|
+
### 2. Add the Vite dev plugin (optional but recommended)
|
|
67
|
+
|
|
68
|
+
```ts
|
|
69
|
+
// vite.config.ts
|
|
70
|
+
import { defineConfig } from "vite";
|
|
71
|
+
import react from "@vitejs/plugin-react";
|
|
72
|
+
import { sightmap } from "@sightmap/react/vite";
|
|
73
|
+
|
|
74
|
+
export default defineConfig({
|
|
75
|
+
plugins: [
|
|
76
|
+
react(),
|
|
77
|
+
sightmap(),
|
|
78
|
+
],
|
|
79
|
+
});
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
The plugin registers a `/__sightmap__/sightmap.json` endpoint in dev so the runtime provider can fetch the merged sightmap. It does **not** write to `.sightmap/` — generation is explicit (`sightmap-react gen`).
|
|
83
|
+
|
|
84
|
+
### 3. Mount the provider
|
|
85
|
+
|
|
86
|
+
```tsx
|
|
87
|
+
// app root
|
|
88
|
+
import { SightmapProvider } from "@sightmap/react";
|
|
89
|
+
|
|
90
|
+
export function App() {
|
|
91
|
+
return (
|
|
92
|
+
<SightmapProvider runtimeIntrospection="dev">
|
|
93
|
+
<YourApp />
|
|
94
|
+
</SightmapProvider>
|
|
95
|
+
);
|
|
96
|
+
}
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
The provider:
|
|
100
|
+
- Loads the merged sightmap (from `/__sightmap__/sightmap.json` in dev, or a static `/sightmap.json` in prod).
|
|
101
|
+
- Installs `window.__SIGHTMAP__` for an agent to introspect (dev by default; opt-in for prod).
|
|
102
|
+
|
|
103
|
+
### 4. Let an agent curate
|
|
104
|
+
|
|
105
|
+
The agent (Subtext, Claude Code, Playwright MCP, etc.) inspects the running app via `window.__SIGHTMAP__` and writes `data-sightmap="..."` props into source where it needs stable selectors. Re-run `sightmap-react gen` to refresh the structural skeleton; the agent's `memory`, intent, and request annotations survive untouched.
|
|
106
|
+
|
|
107
|
+
### 5. The rest of the CLI
|
|
108
|
+
|
|
109
|
+
```bash
|
|
110
|
+
# rerun whenever routes or data-sightmap props change
|
|
111
|
+
sightmap-react gen
|
|
112
|
+
|
|
113
|
+
# CI gate: dry-run; exit 1 if .sightmap/ is out of date
|
|
114
|
+
sightmap-react gen --check
|
|
115
|
+
|
|
116
|
+
# print a unified diff of would-be changes; writes nothing
|
|
117
|
+
sightmap-react gen --diff
|
|
118
|
+
|
|
119
|
+
# validate; warns about routes with no view, drift between source and YAML
|
|
120
|
+
sightmap-react validate
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
Run `sightmap-react gen --check` in CI to fail the build when routes or
|
|
124
|
+
`data-sightmap` props have drifted from the committed `.sightmap/` files.
|
|
125
|
+
Run `sightmap-react gen` to fix.
|
|
126
|
+
|
|
127
|
+
## File layout
|
|
128
|
+
|
|
129
|
+
```
|
|
130
|
+
.sightmap/
|
|
131
|
+
login.yaml # plugin-scaffolded, agent-curated: view + components for /login
|
|
132
|
+
dashboard.yaml # plugin-scaffolded, agent-curated
|
|
133
|
+
shared.yaml # plugin-scaffolded: cross-route components
|
|
134
|
+
extras.yaml # agent-only: non-derivable additions
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
Plugin owns: `name`, `route`, `selector`, `children`. Agent owns: `memory`, intent, requests, and any unknown field. Smart-merge preserves agent fields, comments, and ordering.
|
|
138
|
+
|
|
139
|
+
## What's in v0.1
|
|
140
|
+
|
|
141
|
+
- `<SightmapProvider>` + `window.__SIGHTMAP__` (read-only basics: `walkTree`, `inspectAt`, `getCurrentView`, `getSightmap`, `match`, `findByDataSightmap`, `version`)
|
|
142
|
+
- Vite dev plugin (registers `/__sightmap__/sightmap.json` middleware)
|
|
143
|
+
- React-router 7 declarative-mode adapter (driven from the CLI)
|
|
144
|
+
- React-router 7 framework-mode adapter (`app/routes.ts` programmatic config)
|
|
145
|
+
- Smart-merge YAML writer (idempotent; preserves agent fields)
|
|
146
|
+
- CLI: `gen`, `validate`
|
|
147
|
+
|
|
148
|
+
### Selecting an adapter
|
|
149
|
+
|
|
150
|
+
`sightmap-react gen --router <name>` accepts:
|
|
151
|
+
|
|
152
|
+
- `react-router-7` — declarative `<Routes><Route />` JSX (default).
|
|
153
|
+
- `react-router-7-framework` — programmatic `app/routes.ts` config using `route`, `index`, `layout`, `prefix` from `@react-router/dev/routes`.
|
|
154
|
+
- `auto` — picks framework mode if `app/routes.ts` exists, else declarative.
|
|
155
|
+
|
|
156
|
+
Framework-mode v0.1 limitations: hardcoded `app/` directory (custom `appDirectory` from `react-router.config.ts` is not yet honored), top-level helper identifiers only (no namespaced/aliased calls), string-literal arguments only, and no support for `flatRoutes()` filesystem-based routing.
|
|
157
|
+
|
|
158
|
+
## Coming in v0.2
|
|
159
|
+
|
|
160
|
+
- React-router 7 data-mode adapter
|
|
161
|
+
- `flatRoutes()` filesystem-based discovery for framework mode
|
|
162
|
+
- Adapters for Next.js, Remix, TanStack Router
|
|
163
|
+
- Curation helpers in the runtime API: `suggestSelector`, `verifySelector`, `diff`
|
|
164
|
+
- CLI: `diff`
|
|
165
|
+
|
|
166
|
+
## Design
|
|
167
|
+
|
|
168
|
+
- v0 design: [docs/superpowers/specs/2026-04-26-react-sdk-design.md](https://github.com/sightmap/sightmap-js/blob/main/docs/superpowers/specs/2026-04-26-react-sdk-design.md)
|
|
169
|
+
- Bootstrap-only codegen pivot: [docs/superpowers/specs/2026-05-08-react-sdk-bootstrap-codegen.md](https://github.com/sightmap/sightmap-js/blob/main/docs/superpowers/specs/2026-05-08-react-sdk-bootstrap-codegen.md)
|
|
170
|
+
|
|
171
|
+
## License
|
|
172
|
+
|
|
173
|
+
MIT
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
#!/usr/bin/env node
|