@ornery/ui-grid-react 1.0.0 → 1.0.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/AGENTS.md +67 -0
- package/package.json +3 -3
package/AGENTS.md
ADDED
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
# @ornery/ui-grid-react — Agent Instructions
|
|
2
|
+
|
|
3
|
+
Thin React wrapper. Mounts the vanilla `<ui-grid-element>` custom element and projects React render functions into it via the slot-based portal system.
|
|
4
|
+
|
|
5
|
+
## Build & Test
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm run build --prefix projects/ui-grid-react # tsup → dist/
|
|
9
|
+
npm test --prefix projects/ui-grid-react # vitest (18 tests)
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
Depends on `@ornery/ui-grid-core` + `@ornery/ui-grid-vanilla` — build both first.
|
|
13
|
+
|
|
14
|
+
## Key Files
|
|
15
|
+
|
|
16
|
+
| File | Responsibility |
|
|
17
|
+
|------|---------------|
|
|
18
|
+
| `UiGrid.tsx` | React component wrapping the vanilla element |
|
|
19
|
+
| `mountUiGrid.tsx` | Imperative mount API: `mountUiGrid(host, { options, cellRenderers })` |
|
|
20
|
+
| `vanillaAdapter.ts` | Bridges React lifecycle to the vanilla element (options, event listeners) |
|
|
21
|
+
| `useGridState.ts` | React hook for grid state subscription |
|
|
22
|
+
| `useVirtualScroll.ts` | Virtual scroll hook |
|
|
23
|
+
| `gridStateMath.ts` | Pure math for grid layout calculations |
|
|
24
|
+
| `rustWasmGridEngine.ts` | Optional WASM engine integration |
|
|
25
|
+
| `ui-grid.css` | Wrapper-level styles |
|
|
26
|
+
|
|
27
|
+
## Architecture
|
|
28
|
+
|
|
29
|
+
### Mount Pattern
|
|
30
|
+
|
|
31
|
+
```tsx
|
|
32
|
+
mountUiGrid(hostElement, {
|
|
33
|
+
options: gridOptions,
|
|
34
|
+
cellRenderers: {
|
|
35
|
+
status: ({ value }) => <Pill>{value}</Pill>,
|
|
36
|
+
price: ({ value, row }) => styledCell(String(value), row.color),
|
|
37
|
+
},
|
|
38
|
+
});
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### Cell Renderer Flow
|
|
42
|
+
|
|
43
|
+
1. `mountUiGrid` calls `el.setFrameworkRenderedSlots({ cells: Object.keys(cellRenderers) })`
|
|
44
|
+
2. Listens for `cellSlotsChanged` events
|
|
45
|
+
3. For each added slot: calls the matching render function, creates a React portal, appends to light DOM with `slot` attribute
|
|
46
|
+
4. For removed slots: unmounts the portal
|
|
47
|
+
|
|
48
|
+
### `styledCell` Helper
|
|
49
|
+
|
|
50
|
+
Quick inline-styled cell without creating a full component:
|
|
51
|
+
```tsx
|
|
52
|
+
styledCell(text: string, color: string, extraStyles?: CSSProperties)
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
## Conventions
|
|
56
|
+
|
|
57
|
+
- No class components — functional components + hooks only
|
|
58
|
+
- External deps: `react`, `react-dom` (peer), `@ornery/ui-grid-core`, `@ornery/ui-grid-vanilla`
|
|
59
|
+
- The React wrapper never renders grid cells itself — it delegates to the vanilla element
|
|
60
|
+
- `cellRenderers` map keys must match `columnDef.name` values
|
|
61
|
+
|
|
62
|
+
## Do NOT
|
|
63
|
+
|
|
64
|
+
- Import from `dist/` paths — use tsconfig path mappings
|
|
65
|
+
- Call `setFrameworkRenderedSlots` on every render — only when `cellRenderers` keys change
|
|
66
|
+
- Forget to clean up portals on unmount
|
|
67
|
+
- Add Angular or vanilla rendering logic here — this package only bridges React ↔ vanilla
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ornery/ui-grid-react",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "React wrapper for @ornery/ui-grid-core",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -14,8 +14,8 @@
|
|
|
14
14
|
"./styles": "./dist/ui-grid.css"
|
|
15
15
|
},
|
|
16
16
|
"peerDependencies": {
|
|
17
|
-
"@ornery/ui-grid-core": "1.0.
|
|
18
|
-
"@ornery/ui-grid-vanilla": "1.0.
|
|
17
|
+
"@ornery/ui-grid-core": "1.0.2",
|
|
18
|
+
"@ornery/ui-grid-vanilla": "1.0.2",
|
|
19
19
|
"react": "^18.0.0 || ^19.0.0",
|
|
20
20
|
"react-dom": "^18.0.0 || ^19.0.0"
|
|
21
21
|
},
|