react-state-basis 0.2.3 → 0.3.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/README.md +134 -162
- package/dist/chunk-GEHMQPV4.mjs +28 -0
- package/dist/chunk-GEHMQPV4.mjs.map +1 -0
- package/dist/client.d.mts +7 -0
- package/dist/client.d.ts +7 -0
- package/dist/client.js +47 -0
- package/dist/client.js.map +1 -0
- package/dist/client.mjs +11 -0
- package/dist/client.mjs.map +1 -0
- package/dist/index.d.mts +34 -9
- package/dist/index.d.ts +34 -9
- package/dist/index.js +298 -109
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +248 -81
- package/dist/index.mjs.map +1 -1
- package/dist/plugin.js +13 -6
- package/dist/vite-plugin.d.mts +5 -0
- package/dist/vite-plugin.d.ts +5 -0
- package/dist/vite-plugin.js +52 -0
- package/dist/vite-plugin.js.map +1 -0
- package/dist/vite-plugin.mjs +7 -0
- package/dist/vite-plugin.mjs.map +1 -0
- package/package.json +11 -1
package/README.md
CHANGED
|
@@ -4,241 +4,213 @@
|
|
|
4
4
|
|
|
5
5
|
<div align="center">
|
|
6
6
|
|
|
7
|
-
# 📐
|
|
8
|
-
###
|
|
7
|
+
# 📐 react-state-basis
|
|
8
|
+
### Real-time architectural auditor for React
|
|
9
9
|
|
|
10
10
|
[](https://www.npmjs.com/package/react-state-basis)
|
|
11
11
|
[](https://github.com/liovic/react-state-basis/stargazers)
|
|
12
12
|
[](https://opensource.org/licenses/MIT)
|
|
13
13
|
|
|
14
|
+
**Audit your React architecture in development — without changing a single line of component code.**
|
|
15
|
+
|
|
14
16
|
</div>
|
|
15
17
|
|
|
16
18
|
---
|
|
17
19
|
|
|
18
|
-
|
|
19
|
-
In Linear Algebra, a **Basis** is a set of linearly independent vectors that span a space. **Basis** treats your React application as a dynamic system where every state variable is a signal over time.
|
|
20
|
+
## What is react-state-basis?
|
|
20
21
|
|
|
21
|
-
|
|
22
|
+
**react-state-basis** is a development-time React utility that analyzes how state behaves *over time* and surfaces architectural issues that are difficult to detect with snapshot-based tools.
|
|
22
23
|
|
|
23
|
-
|
|
24
|
+
It focuses on **runtime behavior**, not values — helping you identify redundant state, hidden coupling, unstable update patterns, and effect-driven render loops while your app is running.
|
|
24
25
|
|
|
25
|
-
|
|
26
|
+
> This is an architectural diagnostic tool.
|
|
27
|
+
> It is not a state manager and not a replacement for React DevTools.
|
|
26
28
|
|
|
27
|
-
|
|
29
|
+
---
|
|
28
30
|
|
|
29
|
-
|
|
30
|
-
The engine groups all state updates occurring within a **20ms window** (aligned with the 60FPS frame budget) into a single **System Tick**.
|
|
31
|
+
## What problems does it catch?
|
|
31
32
|
|
|
32
|
-
|
|
33
|
-
Every hook is mapped to a vector $v$ in a 50-dimensional space $\mathbb{R}^{50}$ representing a sliding window of the last 50 ticks:
|
|
34
|
-
* `1` = State transition occurred during this tick.
|
|
35
|
-
* `0` = State remained stagnant.
|
|
33
|
+
In real React applications, many architectural issues don’t show up as errors:
|
|
36
34
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
State
|
|
41
|
-
Result: Cosine Similarity = 1.00 (REDUNDANT)
|
|
42
|
-
```
|
|
35
|
+
- Multiple state variables encode the same information
|
|
36
|
+
- Effects create subtle feedback loops
|
|
37
|
+
- Components re-render twice even though nothing “looks wrong”
|
|
38
|
+
- State updates oscillate under load or user interaction
|
|
43
39
|
|
|
44
|
-
|
|
40
|
+
These issues emerge **over time**, across renders.
|
|
45
41
|
|
|
46
|
-
|
|
47
|
-
Every 5 ticks, Basis calculates the **Cosine Similarity** between all active state vectors. If similarity exceeds **0.88**, an architectural alert is triggered in your console with a suggested fix.
|
|
42
|
+
react-state-basis observes state updates as a timeline and flags structural patterns that indicate architectural debt.
|
|
48
43
|
|
|
49
44
|
---
|
|
50
45
|
|
|
51
|
-
##
|
|
52
|
-
Basis is a **development-only** infrastructure. Using **Conditional Exports**, it automatically swaps itself for a "Zero-Op" version in production:
|
|
53
|
-
* **Development:** Full Linear Algebra engine and auditor active.
|
|
54
|
-
* **Production:** Exports raw React hooks directly. **Zero bundle bloat. Zero performance penalty.**
|
|
46
|
+
## Key capabilities
|
|
55
47
|
|
|
56
|
-
|
|
48
|
+
- **Temporal State Matrix (HUD)**
|
|
49
|
+
A real-time visualization of state activity. If rows pulse together, the architecture is coupled or redundant.
|
|
57
50
|
|
|
58
|
-
|
|
51
|
+
- **Redundant state detection**
|
|
52
|
+
Identifies state variables that move together and suggests derived alternatives (e.g. `useMemo`).
|
|
59
53
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
npm i react-state-basis
|
|
63
|
-
```
|
|
54
|
+
- **Causality tracing**
|
|
55
|
+
Tracks `useEffect → setState` chains to expose hidden double-render cycles.
|
|
64
56
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
import { BasisProvider } from 'react-state-basis';
|
|
57
|
+
- **Stability circuit breaker**
|
|
58
|
+
Detects recursive update patterns and halts them before the browser tab locks up.
|
|
68
59
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
<BasisProvider debug={true}> {/* Set debug={false} for total silence in dev */}
|
|
72
|
-
<App />
|
|
73
|
-
</BasisProvider>
|
|
74
|
-
);
|
|
75
|
-
}
|
|
76
|
-
```
|
|
77
|
-
**Props:**
|
|
78
|
-
* `debug (boolean)`:
|
|
79
|
-
* `true` (Default): Enables the real-time diagnostic dashboard, visual system status badge (Web only), and detailed console auditing (including the Circuit Breaker).
|
|
80
|
-
* `false`: Completely deactivates the Basis engine. No background analysis, no memory consumption, and no logging. The "Circuit Breaker" is also disabled in this mode to allow for a zero-overhead, raw React experience in development.
|
|
60
|
+
- **Universal support**
|
|
61
|
+
Works with **React Web**, **React Native**, and **Expo**.
|
|
81
62
|
|
|
82
|
-
|
|
83
|
-
|
|
63
|
+
---
|
|
64
|
+
|
|
65
|
+
## High-Level Insights
|
|
66
|
+
|
|
67
|
+
### System Health Report
|
|
68
|
+
For a bird's-eye view of your entire application's state-space, call the global reporter in your browser console or in code :
|
|
84
69
|
|
|
85
|
-
**Standard Named Imports (Recommended):**
|
|
86
70
|
```tsx
|
|
87
|
-
|
|
88
|
-
// import { useState, useEffect } from 'react';
|
|
89
|
-
|
|
90
|
-
// ✅ To this:
|
|
91
|
-
import {
|
|
92
|
-
useState,
|
|
93
|
-
useEffect,
|
|
94
|
-
useMemo,
|
|
95
|
-
useCallback,
|
|
96
|
-
useContext,
|
|
97
|
-
useRef,
|
|
98
|
-
useLayoutEffect,
|
|
99
|
-
useId,
|
|
100
|
-
useSyncExternalStore,
|
|
101
|
-
useDeferredValue,
|
|
102
|
-
useTransition
|
|
103
|
-
} from 'react-state-basis';
|
|
104
|
-
|
|
105
|
-
function MyComponent() {
|
|
106
|
-
const [data, setData] = useState([]); // Automatically vectorized and tracked
|
|
107
|
-
}
|
|
71
|
+
window.printBasisReport();
|
|
108
72
|
```
|
|
109
73
|
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
74
|
+
This generates a correlation matrix and calculates your Basis Efficiency Score in real-time.
|
|
75
|
+
|
|
76
|
+
---
|
|
77
|
+
|
|
78
|
+
## How it works (high level)
|
|
79
|
+
|
|
80
|
+
During development, react-state-basis observes state updates and compares how they evolve over short time windows.
|
|
81
|
+
|
|
82
|
+
Instead of asking:
|
|
83
|
+
> “What is the state right now?”
|
|
84
|
+
|
|
85
|
+
It asks:
|
|
86
|
+
> “How does this state behave relative to other states over time?”
|
|
87
|
+
|
|
88
|
+
This allows the engine to detect redundancy, coupling, and instability that static analysis and snapshot tools can’t see.
|
|
89
|
+
|
|
90
|
+
Implementation details are intentionally hidden from the public API.
|
|
91
|
+
The tool is designed to be **used**, not configured.
|
|
92
|
+
|
|
93
|
+
👉 For a deeper dive into the internal model and formal specification, see the [project Wiki](https://github.com/liovic/react-state-basis/wiki).
|
|
94
|
+
|
|
95
|
+
---
|
|
96
|
+
|
|
97
|
+
## See it in action
|
|
98
|
+
|
|
99
|
+
The optional HUD visualizes your application’s state “heartbeat” using the Canvas API.
|
|
100
|
+
|
|
101
|
+
Below, Basis detects redundant state, flags effect-driven render loops, and activates the stability circuit breaker in real time.
|
|
102
|
+
|
|
103
|
+
<p align="center">
|
|
104
|
+
<img src="./assets/react-state-basis.gif" width="800" alt="React State Basis Demo" />
|
|
105
|
+
</p>
|
|
114
106
|
|
|
115
|
-
function MyComponent() {
|
|
116
|
-
const [count, setCount] = Basis.useState(0); // Also tracked automatically
|
|
117
|
-
}
|
|
118
|
-
```
|
|
119
107
|
---
|
|
120
108
|
|
|
121
|
-
##
|
|
122
|
-
|
|
109
|
+
## Zero-friction setup (Vite)
|
|
110
|
+
|
|
111
|
+
As of **v0.3.0**, react-state-basis runs transparently in development.
|
|
112
|
+
|
|
113
|
+
You do **not** need to modify component imports or wrap individual hooks.
|
|
114
|
+
|
|
115
|
+
### 1. Install
|
|
116
|
+
```bash
|
|
117
|
+
npm i react-state-basis
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
### 2. Configure Vite
|
|
123
121
|
|
|
124
|
-
|
|
125
|
-
|
|
122
|
+
Add the `basis` plugin to your `vite.config.ts`.
|
|
123
|
+
It instruments React automatically during development.
|
|
126
124
|
|
|
127
|
-
```
|
|
128
|
-
|
|
129
|
-
import
|
|
130
|
-
import
|
|
125
|
+
```tsx
|
|
126
|
+
import { defineConfig } from 'vite';
|
|
127
|
+
import react from '@vitejs/plugin-react';
|
|
128
|
+
import { basis } from 'react-state-basis/vite';
|
|
131
129
|
|
|
132
130
|
export default defineConfig({
|
|
133
131
|
plugins: [
|
|
134
132
|
react({
|
|
135
|
-
babel: {
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
}
|
|
139
|
-
})
|
|
133
|
+
babel: { plugins: [['react-state-basis/plugin']] }
|
|
134
|
+
}),
|
|
135
|
+
basis() // No import changes required
|
|
140
136
|
]
|
|
141
|
-
})
|
|
137
|
+
});
|
|
142
138
|
```
|
|
143
139
|
|
|
144
|
-
###
|
|
145
|
-
|
|
140
|
+
### 3. Initialize the provider
|
|
141
|
+
|
|
142
|
+
Wrap your root component with `BasisProvider` to enable the engine and HUD.
|
|
146
143
|
|
|
147
144
|
```tsx
|
|
148
|
-
|
|
145
|
+
import { BasisProvider } from 'react-state-basis';
|
|
146
|
+
|
|
147
|
+
root.render(
|
|
148
|
+
<BasisProvider debug={true}>
|
|
149
|
+
<App />
|
|
150
|
+
</BasisProvider>
|
|
151
|
+
);
|
|
149
152
|
```
|
|
150
153
|
|
|
151
|
-
|
|
154
|
+
### Ignoring files
|
|
152
155
|
|
|
153
|
-
|
|
156
|
+
If certain files are intentionally noisy (e.g. animation loops or low-level adapters), you can exclude them from auditing.
|
|
154
157
|
|
|
155
|
-
|
|
156
|
-
For a bird's-eye view of your entire application's state-space, call the global reporter in your browser console:
|
|
158
|
+
Add this comment at the top of the file:
|
|
157
159
|
|
|
158
|
-
```
|
|
159
|
-
|
|
160
|
+
```tsx
|
|
161
|
+
// @basis-ignore
|
|
160
162
|
```
|
|
161
|
-
This generates a correlation matrix and calculates your **Basis Efficiency Score** in real-time.
|
|
162
|
-
|
|
163
|
-
---
|
|
164
|
-
### React Native & Expo
|
|
165
163
|
|
|
166
|
-
|
|
164
|
+
That file will be skipped by both the Babel plugin and the engine.
|
|
167
165
|
|
|
168
166
|
---
|
|
169
167
|
|
|
170
|
-
## Basis vs
|
|
168
|
+
## Basis vs existing tools
|
|
171
169
|
|
|
172
170
|
| Feature | React DevTools | Why Did You Render | Basis 📐 |
|
|
173
171
|
| :--- | :---: | :---: | :---: |
|
|
174
172
|
| **Analyzes Values** | ✅ | ✅ | ❌ (Value-agnostic) |
|
|
175
173
|
| **Tracks Timing/Ticks** | ❌ | ❌ | ✅ |
|
|
176
174
|
| **Detects Redundancy** | ❌ | ❌ | ✅ (Linear Dependence) |
|
|
177
|
-
| **Circuit Breaker** | ❌ | ❌ | ✅ (Halts
|
|
175
|
+
| **Circuit Breaker** | ❌ | ❌ | ✅ (Halts Loops) |
|
|
178
176
|
| **Prod. Overhead** | Low | Medium | **Zero** (Ghost Mode) |
|
|
179
177
|
|
|
180
178
|
---
|
|
181
179
|
|
|
182
|
-
##
|
|
183
|
-
|
|
184
|
-
### Redundant State Detection
|
|
185
|
-
Basis monitors transition vectors to identify "Dimension Collapses." When multiple states (like `isLoading`, `isSuccess`) update in lockstep, it suggests consolidating them.
|
|
186
|
-
<br/>
|
|
187
|
-
<img src="./example/screenshots/booleanEntanglement.gif" width="700" alt="Boolean Entanglement Demo" />
|
|
188
|
-
|
|
189
|
-
### Causal Detective
|
|
190
|
-
Identifies "Double Render Cycles" by tracking the causality chain from `useEffect` or `useLayoutEffect` to state setters. Basis provides a direct refactor snippet to move from manual sync to a pure mathematical projection (`useMemo`).
|
|
191
|
-
<br/>
|
|
192
|
-
<img src="./example/screenshots/causal.gif" width="700" alt="Causal Link Demo" />
|
|
180
|
+
## Case study: shadcn-admin audit
|
|
193
181
|
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
<img src="./example/screenshots/infiniteLoopTrap.gif" width="700" alt="Circuit Breaker Demo" />
|
|
182
|
+
We ran react-state-basis on a production-ready dashboard to validate its detection engine.
|
|
183
|
+
- Result: 12 / 12 independent state dimensions
|
|
184
|
+
- Insight: Identified a subtle double-render bottleneck in useIsMobile that static tooling missed
|
|
198
185
|
|
|
199
|
-
### Cross-Context Audit
|
|
200
|
-
Performs a global state space audit to expose hidden coupling between disparate parts of your architecture (e.g., syncing states across different Providers).
|
|
201
|
-
<br/>
|
|
202
|
-
<img src="./example/screenshots/initiateGlobalSync.gif" width="700" alt="Cross-Context Sync Demo" />
|
|
203
186
|
|
|
204
|
-
|
|
205
|
-
Basis performs a global audit of your state space to calculate its **Mathematical Rank**-the actual number of independent information dimensions. Use the **Efficiency Score** as a real-time KPI for your architecture.
|
|
206
|
-
<br/>
|
|
207
|
-
<img src="./example/screenshots/systemHealthReport.gif" width="700" alt="System Health Report Demo" />
|
|
187
|
+
<p align="center"> <img src="./assets/shadcn-admin.png" width="800" alt="Real World Audit" /> </p>
|
|
208
188
|
|
|
209
|
-
---
|
|
210
|
-
---
|
|
211
|
-
|
|
212
|
-
## 🔍 Case Study: Auditing a Production-Ready Admin Dashboard
|
|
213
|
-
|
|
214
|
-
I ran Basis on a complex `shadcn/ui` admin template to see how it handles professional-grade code. Here is what the mathematical engine discovered:
|
|
215
|
-
|
|
216
|
-
<p align="center">
|
|
217
|
-
<img src="./assets/real-world-audit.png" width="800" alt="Basis Real World Audit" />
|
|
218
|
-
</p>
|
|
219
|
-
|
|
220
|
-
### Key Insights from the Audit:
|
|
221
|
-
* **Double Render Detection:** Basis flagged a "Double Render Cycle" in the `use-mobile.tsx` hook. It detected that state was being manually synchronized within an effect, causing unnecessary UI churn.
|
|
222
|
-
* **Stability Verification:** The engine verified that the `Sidebar` callbacks were correctly memoized, providing a "Stable Callback" confirmation.
|
|
223
|
-
* **Valid Projections:** Complex table states (pagination, filters) were confirmed as valid mathematical projections, ensuring no redundant `useState` was used.
|
|
224
|
-
|
|
225
|
-
Math reveals exactly what standard code reviews often miss: the **temporal topology** of your application.
|
|
226
189
|
---
|
|
227
190
|
|
|
228
191
|
## Roadmap
|
|
229
192
|
|
|
230
|
-
#### **v0.2.x -
|
|
231
|
-
- [x] Full React Hook
|
|
232
|
-
- [x]
|
|
233
|
-
- [x]
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
- [
|
|
237
|
-
|
|
238
|
-
|
|
193
|
+
#### **v0.2.x - Signal Intelligence & Visual Foundation (Current)** ✅
|
|
194
|
+
- [x] **Full React Hook Parity:** Support for all standard hooks and React Native/Expo.
|
|
195
|
+
- [x] **React 19 Ready:** Full support for `use()`, `useOptimistic()`, and `useActionState()`.
|
|
196
|
+
- [x] **Temporal Matrix HUD:** Real-time Canvas-based visualization of state signals.
|
|
197
|
+
- [x] **Causality Engine:** Detection of sequential sync-leaks and double-render cycles.
|
|
198
|
+
- [x] **Ghost Mode:** Zero-op production exports with no bundle overhead.
|
|
199
|
+
- [x] **95% Test Coverage:** Verified mathematical engine.
|
|
200
|
+
|
|
201
|
+
#### **v0.3.0 - Global State & Ecosystem**
|
|
202
|
+
- [x] **Zero-Config Vite Plugin:** Automatic aliasing for `react` and `react-dom`.
|
|
203
|
+
- [x] **Babel Auto-Instrumentation:** Automatic hook labeling without code changes.
|
|
204
|
+
- [ ] **Zustand Middleware:** Auditing global-to-local state redundancy.
|
|
205
|
+
- [ ] **Redux Integration:** Connecting the causal engine to Redux dispatch cycles.
|
|
206
|
+
- [ ] **CLI Initializer:** `rsb-init` to automatically configure Babel/Vite plugins.
|
|
207
|
+
- [ ] **Context Auditor:** Tracking signal collisions across multiple React Context providers.
|
|
208
|
+
|
|
209
|
+
#### **v0.4.0 - Topology & Automation**
|
|
210
|
+
- [ ] **State-Space Topology Map:** 2D force-directed graph showing coupling clusters.
|
|
211
|
+
- [ ] **Automated Fix Hints:** Advanced console codemods for converting redundant state to `useMemo`.
|
|
239
212
|
|
|
240
213
|
---
|
|
241
214
|
|
|
242
|
-
|
|
243
|
-
Developed by LP
|
|
244
|
-
</div>
|
|
215
|
+
|
|
216
|
+
<div align="center"> Developed by LP • A React utility for engineers who care about architectural correctness </div>
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
// src/vite-plugin.ts
|
|
2
|
+
function basis() {
|
|
3
|
+
return {
|
|
4
|
+
name: "vite-plugin-react-state-basis",
|
|
5
|
+
enforce: "pre",
|
|
6
|
+
resolveId(source, importer) {
|
|
7
|
+
if (source === "react" || source === "react-dom" || source === "react-dom/client") {
|
|
8
|
+
const isLibraryCore = importer && ((importer.includes("react-state-basis/src") || importer.includes("react-state-basis/dist")) && !importer.includes("react-state-basis/example"));
|
|
9
|
+
const isYalc = importer && importer.includes(".yalc");
|
|
10
|
+
if (isLibraryCore || isYalc) {
|
|
11
|
+
return null;
|
|
12
|
+
}
|
|
13
|
+
const mapping = {
|
|
14
|
+
"react": "react-state-basis",
|
|
15
|
+
"react-dom": "react-state-basis",
|
|
16
|
+
"react-dom/client": "react-state-basis/client"
|
|
17
|
+
};
|
|
18
|
+
return this.resolve(mapping[source], importer, { skipSelf: true });
|
|
19
|
+
}
|
|
20
|
+
return null;
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
export {
|
|
26
|
+
basis
|
|
27
|
+
};
|
|
28
|
+
//# sourceMappingURL=chunk-GEHMQPV4.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/vite-plugin.ts"],"sourcesContent":["// src/vite-plugin.ts\n\nimport type { Plugin } from 'vite';\n\nexport function basis(): Plugin {\n return {\n name: 'vite-plugin-react-state-basis',\n enforce: 'pre',\n\n resolveId(source, importer) {\n if (source === 'react' || source === 'react-dom' || source === 'react-dom/client') {\n \n const isLibraryCore = importer && (\n (importer.includes('react-state-basis/src') || importer.includes('react-state-basis/dist')) &&\n !importer.includes('react-state-basis/example')\n );\n\n const isYalc = importer && importer.includes('.yalc');\n\n if (isLibraryCore || isYalc) {\n return null;\n }\n\n const mapping: Record<string, string> = {\n 'react': 'react-state-basis',\n 'react-dom': 'react-state-basis',\n 'react-dom/client': 'react-state-basis/client'\n };\n\n return this.resolve(mapping[source], importer, { skipSelf: true });\n }\n return null;\n }\n };\n}"],"mappings":";AAIO,SAAS,QAAgB;AAC9B,SAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,IAET,UAAU,QAAQ,UAAU;AAC1B,UAAI,WAAW,WAAW,WAAW,eAAe,WAAW,oBAAoB;AAEjF,cAAM,gBAAgB,cACnB,SAAS,SAAS,uBAAuB,KAAK,SAAS,SAAS,wBAAwB,MACzF,CAAC,SAAS,SAAS,2BAA2B;AAGhD,cAAM,SAAS,YAAY,SAAS,SAAS,OAAO;AAEpD,YAAI,iBAAiB,QAAQ;AAC3B,iBAAO;AAAA,QACT;AAEA,cAAM,UAAkC;AAAA,UACtC,SAAS;AAAA,UACT,aAAa;AAAA,UACb,oBAAoB;AAAA,QACtB;AAEA,eAAO,KAAK,QAAQ,QAAQ,MAAM,GAAG,UAAU,EAAE,UAAU,KAAK,CAAC;AAAA,MACnE;AACA,aAAO;AAAA,IACT;AAAA,EACF;AACF;","names":[]}
|
package/dist/client.d.ts
ADDED
package/dist/client.js
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
|
|
30
|
+
// src/client.ts
|
|
31
|
+
var client_exports = {};
|
|
32
|
+
__export(client_exports, {
|
|
33
|
+
createRoot: () => createRoot2,
|
|
34
|
+
default: () => client_default,
|
|
35
|
+
hydrateRoot: () => hydrateRoot2
|
|
36
|
+
});
|
|
37
|
+
module.exports = __toCommonJS(client_exports);
|
|
38
|
+
var ReactDOMClient = __toESM(require("react-dom/client"));
|
|
39
|
+
var createRoot2 = ReactDOMClient.createRoot;
|
|
40
|
+
var hydrateRoot2 = ReactDOMClient.hydrateRoot;
|
|
41
|
+
var client_default = ReactDOMClient;
|
|
42
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
43
|
+
0 && (module.exports = {
|
|
44
|
+
createRoot,
|
|
45
|
+
hydrateRoot
|
|
46
|
+
});
|
|
47
|
+
//# sourceMappingURL=client.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/client.ts"],"sourcesContent":["// src/client.ts\n\nimport * as ReactDOMClient from 'react-dom/client';\n\nexport const createRoot = (ReactDOMClient as any).createRoot;\nexport const hydrateRoot = (ReactDOMClient as any).hydrateRoot;\n\nexport default ReactDOMClient;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,oBAAAA;AAAA,EAAA;AAAA,qBAAAC;AAAA;AAAA;AAEA,qBAAgC;AAEzB,IAAMD,cAAqC;AAC3C,IAAMC,eAAsC;AAEnD,IAAO,iBAAQ;","names":["createRoot","hydrateRoot"]}
|
package/dist/client.mjs
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
// src/client.ts
|
|
2
|
+
import * as ReactDOMClient from "react-dom/client";
|
|
3
|
+
var createRoot2 = ReactDOMClient.createRoot;
|
|
4
|
+
var hydrateRoot2 = ReactDOMClient.hydrateRoot;
|
|
5
|
+
var client_default = ReactDOMClient;
|
|
6
|
+
export {
|
|
7
|
+
createRoot2 as createRoot,
|
|
8
|
+
client_default as default,
|
|
9
|
+
hydrateRoot2 as hydrateRoot
|
|
10
|
+
};
|
|
11
|
+
//# sourceMappingURL=client.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/client.ts"],"sourcesContent":["// src/client.ts\n\nimport * as ReactDOMClient from 'react-dom/client';\n\nexport const createRoot = (ReactDOMClient as any).createRoot;\nexport const hydrateRoot = (ReactDOMClient as any).hydrateRoot;\n\nexport default ReactDOMClient;"],"mappings":";AAEA,YAAY,oBAAoB;AAEzB,IAAMA,cAAqC;AAC3C,IAAMC,eAAsC;AAEnD,IAAO,iBAAQ;","names":["createRoot","hydrateRoot"]}
|
package/dist/index.d.mts
CHANGED
|
@@ -3,25 +3,49 @@ import React__default, { ReactNode } from 'react';
|
|
|
3
3
|
export { React };
|
|
4
4
|
export { React as default };
|
|
5
5
|
export { AnchorHTMLAttributes, Attributes, ButtonHTMLAttributes, CSSProperties, ChangeEvent, ComponentProps, ComponentPropsWithRef, ComponentPropsWithoutRef, ComponentType, DependencyList, DetailedHTMLProps, Dispatch, DragEvent, EffectCallback, ElementType, FC, FocusEvent, FormEvent, HTMLAttributes, HTMLProps, InputHTMLAttributes, JSX, Key, KeyboardEvent, MouseEvent, MutableRefObject, PointerEvent, PropsWithChildren, ReactElement, ReactNode, ReactPortal, Reducer, Ref, RefObject, SVGProps, SetStateAction, TouchEvent } from 'react';
|
|
6
|
+
export { basis } from './vite-plugin.mjs';
|
|
7
|
+
import 'vite';
|
|
6
8
|
|
|
7
|
-
interface
|
|
8
|
-
|
|
9
|
+
interface BasisEngineState {
|
|
10
|
+
config: {
|
|
11
|
+
debug: boolean;
|
|
12
|
+
};
|
|
13
|
+
history: Map<string, number[]>;
|
|
14
|
+
currentTickBatch: Set<string>;
|
|
15
|
+
redundantLabels: Set<string>;
|
|
16
|
+
booted: boolean;
|
|
17
|
+
updateLog: {
|
|
18
|
+
label: string;
|
|
19
|
+
ts: number;
|
|
20
|
+
}[];
|
|
21
|
+
tick: number;
|
|
22
|
+
isBatching: boolean;
|
|
23
|
+
currentEffectSource: string | null;
|
|
9
24
|
}
|
|
10
|
-
declare
|
|
11
|
-
|
|
25
|
+
declare const config: {
|
|
26
|
+
debug: boolean;
|
|
27
|
+
};
|
|
12
28
|
declare const history: Map<string, number[]>;
|
|
13
29
|
declare const currentTickBatch: Set<string>;
|
|
14
|
-
declare const
|
|
30
|
+
declare const configureBasis: (newConfig: Partial<{
|
|
31
|
+
debug: boolean;
|
|
32
|
+
}>) => void;
|
|
33
|
+
declare const recordUpdate: (label: string) => boolean;
|
|
15
34
|
declare const beginEffectTracking: (label: string) => void;
|
|
16
35
|
declare const endEffectTracking: () => void;
|
|
17
36
|
declare const registerVariable: (label: string) => void;
|
|
18
37
|
declare const unregisterVariable: (label: string) => void;
|
|
19
|
-
declare const
|
|
38
|
+
declare const printBasisHealthReport: (threshold?: number) => void;
|
|
20
39
|
declare const __testEngine__: {
|
|
21
|
-
|
|
22
|
-
|
|
40
|
+
instance: BasisEngineState;
|
|
41
|
+
config: {
|
|
42
|
+
debug: boolean;
|
|
43
|
+
};
|
|
23
44
|
history: Map<string, number[]>;
|
|
24
45
|
currentTickBatch: Set<string>;
|
|
46
|
+
configureBasis: (newConfig: Partial<{
|
|
47
|
+
debug: boolean;
|
|
48
|
+
}>) => void;
|
|
25
49
|
registerVariable: (label: string) => void;
|
|
26
50
|
recordUpdate: (label: string) => boolean;
|
|
27
51
|
printBasisHealthReport: (threshold?: number) => void;
|
|
@@ -87,6 +111,7 @@ declare const StrictMode: React.ExoticComponent<{
|
|
|
87
111
|
}>;
|
|
88
112
|
declare const Suspense: React.ExoticComponent<React.SuspenseProps>;
|
|
89
113
|
declare const cloneElement: typeof React.cloneElement;
|
|
114
|
+
declare const createElement: typeof React.createElement;
|
|
90
115
|
declare const createRef: typeof React.createRef;
|
|
91
116
|
declare const forwardRef: typeof React.forwardRef;
|
|
92
117
|
declare const isValidElement: typeof React.isValidElement;
|
|
@@ -97,4 +122,4 @@ declare const version: string;
|
|
|
97
122
|
declare const createPortal: any;
|
|
98
123
|
declare const flushSync: any;
|
|
99
124
|
|
|
100
|
-
export { BasisProvider, Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __testEngine__, __test__, beginEffectTracking, cloneElement, config, configureBasis, createContext, createPortal, createRef, currentTickBatch, endEffectTracking, flushSync, forwardRef, history, isValidElement, lazy, memo, printBasisHealthReport, recordUpdate, registerVariable, startTransition, unregisterVariable, use, useActionState, useBasisConfig, useCallback, useContext, useDebugValue, useDeferredValue, useEffect, useId, useImperativeHandle, useInsertionEffect, useLayoutEffect, useMemo, useOptimistic, useReducer, useRef, useState, useSyncExternalStore, useTransition, version };
|
|
125
|
+
export { BasisProvider, Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __testEngine__, __test__, beginEffectTracking, cloneElement, config, configureBasis, createContext, createElement, createPortal, createRef, currentTickBatch, endEffectTracking, flushSync, forwardRef, history, isValidElement, lazy, memo, printBasisHealthReport, recordUpdate, registerVariable, startTransition, unregisterVariable, use, useActionState, useBasisConfig, useCallback, useContext, useDebugValue, useDeferredValue, useEffect, useId, useImperativeHandle, useInsertionEffect, useLayoutEffect, useMemo, useOptimistic, useReducer, useRef, useState, useSyncExternalStore, useTransition, version };
|
package/dist/index.d.ts
CHANGED
|
@@ -3,25 +3,49 @@ import React__default, { ReactNode } from 'react';
|
|
|
3
3
|
export { React };
|
|
4
4
|
export { React as default };
|
|
5
5
|
export { AnchorHTMLAttributes, Attributes, ButtonHTMLAttributes, CSSProperties, ChangeEvent, ComponentProps, ComponentPropsWithRef, ComponentPropsWithoutRef, ComponentType, DependencyList, DetailedHTMLProps, Dispatch, DragEvent, EffectCallback, ElementType, FC, FocusEvent, FormEvent, HTMLAttributes, HTMLProps, InputHTMLAttributes, JSX, Key, KeyboardEvent, MouseEvent, MutableRefObject, PointerEvent, PropsWithChildren, ReactElement, ReactNode, ReactPortal, Reducer, Ref, RefObject, SVGProps, SetStateAction, TouchEvent } from 'react';
|
|
6
|
+
export { basis } from './vite-plugin.js';
|
|
7
|
+
import 'vite';
|
|
6
8
|
|
|
7
|
-
interface
|
|
8
|
-
|
|
9
|
+
interface BasisEngineState {
|
|
10
|
+
config: {
|
|
11
|
+
debug: boolean;
|
|
12
|
+
};
|
|
13
|
+
history: Map<string, number[]>;
|
|
14
|
+
currentTickBatch: Set<string>;
|
|
15
|
+
redundantLabels: Set<string>;
|
|
16
|
+
booted: boolean;
|
|
17
|
+
updateLog: {
|
|
18
|
+
label: string;
|
|
19
|
+
ts: number;
|
|
20
|
+
}[];
|
|
21
|
+
tick: number;
|
|
22
|
+
isBatching: boolean;
|
|
23
|
+
currentEffectSource: string | null;
|
|
9
24
|
}
|
|
10
|
-
declare
|
|
11
|
-
|
|
25
|
+
declare const config: {
|
|
26
|
+
debug: boolean;
|
|
27
|
+
};
|
|
12
28
|
declare const history: Map<string, number[]>;
|
|
13
29
|
declare const currentTickBatch: Set<string>;
|
|
14
|
-
declare const
|
|
30
|
+
declare const configureBasis: (newConfig: Partial<{
|
|
31
|
+
debug: boolean;
|
|
32
|
+
}>) => void;
|
|
33
|
+
declare const recordUpdate: (label: string) => boolean;
|
|
15
34
|
declare const beginEffectTracking: (label: string) => void;
|
|
16
35
|
declare const endEffectTracking: () => void;
|
|
17
36
|
declare const registerVariable: (label: string) => void;
|
|
18
37
|
declare const unregisterVariable: (label: string) => void;
|
|
19
|
-
declare const
|
|
38
|
+
declare const printBasisHealthReport: (threshold?: number) => void;
|
|
20
39
|
declare const __testEngine__: {
|
|
21
|
-
|
|
22
|
-
|
|
40
|
+
instance: BasisEngineState;
|
|
41
|
+
config: {
|
|
42
|
+
debug: boolean;
|
|
43
|
+
};
|
|
23
44
|
history: Map<string, number[]>;
|
|
24
45
|
currentTickBatch: Set<string>;
|
|
46
|
+
configureBasis: (newConfig: Partial<{
|
|
47
|
+
debug: boolean;
|
|
48
|
+
}>) => void;
|
|
25
49
|
registerVariable: (label: string) => void;
|
|
26
50
|
recordUpdate: (label: string) => boolean;
|
|
27
51
|
printBasisHealthReport: (threshold?: number) => void;
|
|
@@ -87,6 +111,7 @@ declare const StrictMode: React.ExoticComponent<{
|
|
|
87
111
|
}>;
|
|
88
112
|
declare const Suspense: React.ExoticComponent<React.SuspenseProps>;
|
|
89
113
|
declare const cloneElement: typeof React.cloneElement;
|
|
114
|
+
declare const createElement: typeof React.createElement;
|
|
90
115
|
declare const createRef: typeof React.createRef;
|
|
91
116
|
declare const forwardRef: typeof React.forwardRef;
|
|
92
117
|
declare const isValidElement: typeof React.isValidElement;
|
|
@@ -97,4 +122,4 @@ declare const version: string;
|
|
|
97
122
|
declare const createPortal: any;
|
|
98
123
|
declare const flushSync: any;
|
|
99
124
|
|
|
100
|
-
export { BasisProvider, Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __testEngine__, __test__, beginEffectTracking, cloneElement, config, configureBasis, createContext, createPortal, createRef, currentTickBatch, endEffectTracking, flushSync, forwardRef, history, isValidElement, lazy, memo, printBasisHealthReport, recordUpdate, registerVariable, startTransition, unregisterVariable, use, useActionState, useBasisConfig, useCallback, useContext, useDebugValue, useDeferredValue, useEffect, useId, useImperativeHandle, useInsertionEffect, useLayoutEffect, useMemo, useOptimistic, useReducer, useRef, useState, useSyncExternalStore, useTransition, version };
|
|
125
|
+
export { BasisProvider, Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __testEngine__, __test__, beginEffectTracking, cloneElement, config, configureBasis, createContext, createElement, createPortal, createRef, currentTickBatch, endEffectTracking, flushSync, forwardRef, history, isValidElement, lazy, memo, printBasisHealthReport, recordUpdate, registerVariable, startTransition, unregisterVariable, use, useActionState, useBasisConfig, useCallback, useContext, useDebugValue, useDeferredValue, useEffect, useId, useImperativeHandle, useInsertionEffect, useLayoutEffect, useMemo, useOptimistic, useReducer, useRef, useState, useSyncExternalStore, useTransition, version };
|