react-state-basis 0.2.4 → 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 +117 -168
- 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 +103 -57
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +81 -57
- 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,240 +4,188 @@
|
|
|
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
|
-
|
|
72
|
-
|
|
73
|
-
|
|
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**.
|
|
62
|
+
|
|
63
|
+
---
|
|
64
|
+
|
|
65
|
+
## High-Level Insights
|
|
81
66
|
|
|
82
|
-
###
|
|
83
|
-
|
|
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
|
-
Basis also supports namespace imports if you prefer to keep your hooks grouped:
|
|
112
|
-
```tsx
|
|
113
|
-
import * as Basis from 'react-state-basis';
|
|
74
|
+
This generates a correlation matrix and calculates your Basis Efficiency Score in real-time.
|
|
114
75
|
|
|
115
|
-
function MyComponent() {
|
|
116
|
-
const [count, setCount] = Basis.useState(0); // Also tracked automatically
|
|
117
|
-
}
|
|
118
|
-
```
|
|
119
76
|
---
|
|
120
77
|
|
|
121
|
-
##
|
|
122
|
-
While Basis works out of the box, hooks will be labeled as `anonymous_state` by default. To get the rich diagnostics seen in the demos (with automatic **filenames** and **variable names**), we highly recommend using our Babel plugin.
|
|
78
|
+
## How it works (high level)
|
|
123
79
|
|
|
124
|
-
|
|
125
|
-
Add Basis to your `vite.config.ts`. It will automatically instrument your hooks during build time:
|
|
80
|
+
During development, react-state-basis observes state updates and compares how they evolve over short time windows.
|
|
126
81
|
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
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>
|
|
106
|
+
|
|
107
|
+
---
|
|
108
|
+
|
|
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
|
|
121
|
+
|
|
122
|
+
Add the `basis` plugin to your `vite.config.ts`.
|
|
123
|
+
It instruments React automatically during development.
|
|
124
|
+
|
|
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
|
-
### 1. Temporal State Matrix (Real-time HUD)
|
|
185
|
-
The "Heartbeat" of your application. Basis injects a high-performance, Zero-Overhead HUD that visualizes your state transitions as a temporal heatmap.
|
|
186
|
-
* **Signal Visualization:** Watch every `useState`, `useReducer`, and `useEffect` update pulse in real-time.
|
|
187
|
-
* **Visual Pattern Recognition:** Identify architectural flaws simply by looking at the rhythm of the matrix. If multiple rows pulse together, they likely belong together.
|
|
188
|
-
* **Zero-Overhead:** Powered by Canvas API and `requestAnimationFrame` polling to ensure your application's performance remains untouched during development.
|
|
189
|
-
|
|
190
|
-
### 2. Redundant State Detection (Dimension Collapse)
|
|
191
|
-
Basis monitors transition vectors to identify "Dimension Collapses" in your state space.
|
|
192
|
-
* **Collinearity Alerts:** When multiple states (like `isLoading`, `isSuccess`, `hasData`) update in lockstep, Basis flags them as mathematically redundant.
|
|
193
|
-
* **Visual Debugging:** Redundant states are automatically highlighted in **Red** within the HUD, providing immediate visual proof that you are storing the same information in multiple places.
|
|
194
|
-
|
|
195
|
-
### 3. Causal Detective (Double Render Tracker)
|
|
196
|
-
Identify "Double Render Cycles" by tracking the causality chain from effects to state setters.
|
|
197
|
-
* **Sequence Tracking:** Detects when a state update is a lagging echo of a `useEffect` or `useLayoutEffect`.
|
|
198
|
-
* **Refactor Insights:** Provides direct console hints to move from manual synchronization to pure, deterministic mathematical projections using `useMemo`.
|
|
199
|
-
|
|
200
|
-
### 4. Stability Circuit Breaker
|
|
201
|
-
A real-time safety monitor for your execution thread.
|
|
202
|
-
* **Oscillation Detection:** If high-frequency state oscillation is detected (e.g., a recursive effect loop), Basis forcefully halts the update chain.
|
|
203
|
-
* **Tab Protection:** Stops the browser thread from locking up, allowing you to catch and fix infinite loops without having to force-quit your browser tab.
|
|
204
|
-
|
|
205
|
-
### 5. System Health & Efficiency Rank
|
|
206
|
-
Basis performs a global audit of your state space to calculate its **Mathematical Rank**—the actual number of independent information dimensions.
|
|
207
|
-
* **Efficiency Score:** A real-time KPI for your architecture. A 100% score means every state variable is a unique, non-redundant source of truth.
|
|
208
|
-
* **Architecture Audit:** Use the global Health Report (`window.printBasisReport()`) to generate a correlation matrix of your entire application state.
|
|
209
|
-
|
|
210
|
-
---
|
|
211
|
-
|
|
212
|
-
### See it in Action
|
|
213
|
-
<p align="center">
|
|
214
|
-
<img src="./assets/react-state-basis.gif" width="800" alt="React State Basis Demo" />
|
|
215
|
-
</p>
|
|
180
|
+
## Case study: shadcn-admin audit
|
|
216
181
|
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
To test the engine against professional standards, Basis was used to audit the [shadcn-admin](https://github.com/satnaing/shadcn-admin) template-a high-quality, production-ready dashboard implementation.
|
|
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
|
|
222
185
|
|
|
223
|
-
<p align="center">
|
|
224
|
-
<img src="./assets/shadcn-admin.png" width="800" alt="Basis Real World Audit" />
|
|
225
|
-
</p>
|
|
226
186
|
|
|
227
|
-
|
|
228
|
-
The project demonstrated exceptional architectural integrity. The engine verified a **100% Efficiency**, confirming that all state variables are linearly independent. This proves that the codebase follows a "Single Source of Truth" philosophy with zero redundant state.
|
|
187
|
+
<p align="center"> <img src="./assets/shadcn-admin.png" width="800" alt="Real World Audit" /> </p>
|
|
229
188
|
|
|
230
|
-
### Subtle Optimization Caught
|
|
231
|
-
Despite the perfect efficiency score, the **Causality Engine** identified a hidden performance bottleneck:
|
|
232
|
-
* **Double Render Detection:** Basis flagged a "Double Render Cycle" in the `use-mobile.tsx` hook. It detected that the `isMobile` state was being manually synchronized within a `useEffect`, triggering a secondary render pass.
|
|
233
|
-
* **Refactor Insight:** While the logic was correct, Basis revealed the cost of the implementation - a redundant render cycle that occurs before every layout shift.
|
|
234
|
-
|
|
235
|
-
### Stability Confirmation
|
|
236
|
-
The auditor provided formal verification for the rest of the suite:
|
|
237
|
-
* **Stable Callbacks:** Verified that `Sidebar` methods were correctly memoized, ensuring child components are protected from unnecessary updates.
|
|
238
|
-
* **Valid Projections:** Confirmed that complex table logic (pagination and filtering) was implemented as pure mathematical projections, rather than state-syncing.
|
|
239
|
-
|
|
240
|
-
Math reveals exactly what standard code reviews often miss: the **temporal topology** of your application.
|
|
241
189
|
---
|
|
242
190
|
|
|
243
191
|
## Roadmap
|
|
@@ -251,6 +199,8 @@ Math reveals exactly what standard code reviews often miss: the **temporal topol
|
|
|
251
199
|
- [x] **95% Test Coverage:** Verified mathematical engine.
|
|
252
200
|
|
|
253
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.
|
|
254
204
|
- [ ] **Zustand Middleware:** Auditing global-to-local state redundancy.
|
|
255
205
|
- [ ] **Redux Integration:** Connecting the causal engine to Redux dispatch cycles.
|
|
256
206
|
- [ ] **CLI Initializer:** `rsb-init` to automatically configure Babel/Vite plugins.
|
|
@@ -262,6 +212,5 @@ Math reveals exactly what standard code reviews often miss: the **temporal topol
|
|
|
262
212
|
|
|
263
213
|
---
|
|
264
214
|
|
|
265
|
-
|
|
266
|
-
Developed by LP
|
|
267
|
-
</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 };
|