@quantajs/react 2.0.0-beta.1 → 2.0.0-beta.10
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/dist/index.cjs +22 -46
- package/dist/index.d.ts +36 -19
- package/dist/index.js +1243 -625
- package/package.json +64 -59
- package/readme.md +140 -133
- package/LICENSE +0 -21
package/package.json
CHANGED
|
@@ -1,61 +1,66 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
2
|
+
"name": "@quantajs/react",
|
|
3
|
+
"private": false,
|
|
4
|
+
"author": {
|
|
5
|
+
"name": "Jeel Gajera",
|
|
6
|
+
"url": "https://github.com/JeelGajera"
|
|
7
|
+
},
|
|
8
|
+
"description": "React integration for QuantaJS - A compact, scalable, and developer-friendly state management library for React applications.",
|
|
9
|
+
"keywords": [
|
|
10
|
+
"quantajs",
|
|
11
|
+
"quanta",
|
|
12
|
+
"state-management",
|
|
13
|
+
"reactivity",
|
|
14
|
+
"react",
|
|
15
|
+
"hooks"
|
|
16
|
+
],
|
|
17
|
+
"repository": {
|
|
18
|
+
"type": "git",
|
|
19
|
+
"url": "git+https://github.com/quanta-js/quanta.git"
|
|
20
|
+
},
|
|
21
|
+
"bugs": {
|
|
22
|
+
"url": "https://github.com/quanta-js/quanta/issues"
|
|
23
|
+
},
|
|
24
|
+
"homepage": "https://quantajs.com",
|
|
25
|
+
"version": "2.0.0-beta.10",
|
|
26
|
+
"type": "module",
|
|
27
|
+
"license": "MIT",
|
|
28
|
+
"scripts": {
|
|
29
|
+
"dev": "npm run format && npm run lint:fix && npm run build",
|
|
30
|
+
"build": "npm run clean && vite build",
|
|
31
|
+
"preview": "vite preview",
|
|
32
|
+
"clean": "rimraf dist",
|
|
33
|
+
"lint": "eslint \"src/**/*.{ts,tsx}\"",
|
|
34
|
+
"lint:fix": "eslint \"src/**/*.{ts,tsx}\" --fix",
|
|
35
|
+
"format": "prettier --write \"src/**/*.{ts,tsx}\""
|
|
36
|
+
},
|
|
37
|
+
"main": "./dist/index.js",
|
|
38
|
+
"module": "./dist/index.js",
|
|
39
|
+
"types": "./dist/index.d.ts",
|
|
40
|
+
"exports": {
|
|
41
|
+
".": {
|
|
42
|
+
"types": "./dist/index.d.ts",
|
|
43
|
+
"import": "./dist/index.js",
|
|
44
|
+
"require": "./dist/index.cjs"
|
|
45
|
+
}
|
|
46
|
+
},
|
|
47
|
+
"files": [
|
|
48
|
+
"dist"
|
|
49
|
+
],
|
|
50
|
+
"sideEffects": false,
|
|
51
|
+
"peerDependencies": {
|
|
52
|
+
"react": ">=16.8.0"
|
|
53
|
+
},
|
|
54
|
+
"dependencies": {
|
|
55
|
+
"@quantajs/core": "workspace:*",
|
|
56
|
+
"@quantajs/devtools": "workspace:*"
|
|
57
|
+
},
|
|
58
|
+
"devDependencies": {
|
|
59
|
+
"@types/react": "^19.2.14",
|
|
60
|
+
"react": "^19.2.4"
|
|
61
|
+
},
|
|
62
|
+
"publishConfig": {
|
|
63
|
+
"access": "public",
|
|
64
|
+
"registry": "https://registry.npmjs.org/"
|
|
36
65
|
}
|
|
37
|
-
|
|
38
|
-
"files": [
|
|
39
|
-
"dist"
|
|
40
|
-
],
|
|
41
|
-
"sideEffects": false,
|
|
42
|
-
"peerDependencies": {
|
|
43
|
-
"react": ">=16.8.0"
|
|
44
|
-
},
|
|
45
|
-
"dependencies": {
|
|
46
|
-
"@quantajs/core": "2.0.0-beta.1"
|
|
47
|
-
},
|
|
48
|
-
"devDependencies": {
|
|
49
|
-
"@types/react": "^18.3.12",
|
|
50
|
-
"react": "^18.3.1"
|
|
51
|
-
},
|
|
52
|
-
"scripts": {
|
|
53
|
-
"dev": "npm run format && npm run lint:fix && npm run build",
|
|
54
|
-
"build": "npm run clean && vite build",
|
|
55
|
-
"preview": "vite preview",
|
|
56
|
-
"clean": "rimraf dist",
|
|
57
|
-
"lint": "eslint \"src/**/*.{ts,tsx}\"",
|
|
58
|
-
"lint:fix": "eslint \"src/**/*.{ts,tsx}\" --fix",
|
|
59
|
-
"format": "prettier --write \"src/**/*.{ts,tsx}\""
|
|
60
|
-
}
|
|
61
|
-
}
|
|
66
|
+
}
|
package/readme.md
CHANGED
|
@@ -1,133 +1,140 @@
|
|
|
1
|
-
# @quantajs/react
|
|
2
|
-
|
|
3
|
-

|
|
4
|
-
|
|
5
|
-
React integration for QuantaJS - A compact, scalable, and developer-friendly state management library for React applications.
|
|
6
|
-
|
|
7
|
-
## 🚀 Features
|
|
8
|
-
|
|
9
|
-
✅ **React Optimized** – Built specifically for React applications
|
|
10
|
-
✅ **Performance First** – Uses `useSyncExternalStore` for efficient updates
|
|
11
|
-
✅ **Type-Safe** – Full TypeScript support with proper inference
|
|
12
|
-
✅ **Flexible** – Multiple usage patterns (Provider, Direct, Selectors)
|
|
13
|
-
✅ **QuantaJS Core** – Direct access to reactive, computed, and watch
|
|
14
|
-
|
|
15
|
-
## 📦 Installation
|
|
16
|
-
|
|
17
|
-
```sh
|
|
18
|
-
npm install @quantajs/react @quantajs/core
|
|
19
|
-
# or
|
|
20
|
-
yarn add @quantajs/react @quantajs/core
|
|
21
|
-
# or
|
|
22
|
-
pnpm add @quantajs/react @quantajs/core
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
## ⚡ Quick Start
|
|
26
|
-
|
|
27
|
-
### Basic Counter Example
|
|
28
|
-
|
|
29
|
-
```tsx
|
|
30
|
-
import React from 'react';
|
|
31
|
-
import { createStore, QuantaProvider, useStore } from '@quantajs/react';
|
|
32
|
-
|
|
33
|
-
// Create store
|
|
34
|
-
const counterStore = createStore('counter', {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
```
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
```
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
1
|
+
# @quantajs/react
|
|
2
|
+
|
|
3
|
+

|
|
4
|
+
|
|
5
|
+
React integration for QuantaJS - A compact, scalable, and developer-friendly state management library for React applications.
|
|
6
|
+
|
|
7
|
+
## 🚀 Features
|
|
8
|
+
|
|
9
|
+
✅ **React Optimized** – Built specifically for React applications
|
|
10
|
+
✅ **Performance First** – Uses `useSyncExternalStore` for efficient updates
|
|
11
|
+
✅ **Type-Safe** – Full TypeScript support with proper inference
|
|
12
|
+
✅ **Flexible** – Multiple usage patterns (Provider, Direct, Selectors)
|
|
13
|
+
✅ **QuantaJS Core** – Direct access to reactive, computed, and watch
|
|
14
|
+
|
|
15
|
+
## 📦 Installation
|
|
16
|
+
|
|
17
|
+
```sh
|
|
18
|
+
npm install @quantajs/react @quantajs/core
|
|
19
|
+
# or
|
|
20
|
+
yarn add @quantajs/react @quantajs/core
|
|
21
|
+
# or
|
|
22
|
+
pnpm add @quantajs/react @quantajs/core
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## ⚡ Quick Start
|
|
26
|
+
|
|
27
|
+
### Basic Counter Example
|
|
28
|
+
|
|
29
|
+
```tsx
|
|
30
|
+
import React from 'react';
|
|
31
|
+
import { createStore, QuantaProvider, useStore } from '@quantajs/react';
|
|
32
|
+
|
|
33
|
+
// Create store
|
|
34
|
+
const counterStore = createStore('counter', {
|
|
35
|
+
state: () => ({ count: 0 }),
|
|
36
|
+
getters: {
|
|
37
|
+
doubleCount: (state) => state.count * 2,
|
|
38
|
+
},
|
|
39
|
+
actions: {
|
|
40
|
+
increment() {
|
|
41
|
+
this.count++;
|
|
42
|
+
},
|
|
43
|
+
decrement() {
|
|
44
|
+
this.count--;
|
|
45
|
+
},
|
|
46
|
+
},
|
|
47
|
+
});
|
|
48
|
+
|
|
49
|
+
// Component
|
|
50
|
+
function Counter() {
|
|
51
|
+
const store = useStore();
|
|
52
|
+
|
|
53
|
+
return (
|
|
54
|
+
<div>
|
|
55
|
+
<p>Count: {store.count}</p>
|
|
56
|
+
<p>Double: {store.doubleCount}</p>
|
|
57
|
+
<button onClick={() => store.increment()}>+</button>
|
|
58
|
+
<button onClick={() => store.decrement()}>-</button>
|
|
59
|
+
</div>
|
|
60
|
+
);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
// App
|
|
64
|
+
function App() {
|
|
65
|
+
return (
|
|
66
|
+
<QuantaProvider store={counterStore}>
|
|
67
|
+
<Counter />
|
|
68
|
+
</QuantaProvider>
|
|
69
|
+
);
|
|
70
|
+
}
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
### With Selectors (Performance)
|
|
74
|
+
|
|
75
|
+
```tsx
|
|
76
|
+
import { useQuantaStore } from '@quantajs/react';
|
|
77
|
+
|
|
78
|
+
function CounterDisplay() {
|
|
79
|
+
// Only re-render when count changes
|
|
80
|
+
const count = useQuantaStore(counterStore, (store) => store.count);
|
|
81
|
+
|
|
82
|
+
return <p>Count: {count}</p>;
|
|
83
|
+
}
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
### Component-Scoped Store
|
|
87
|
+
|
|
88
|
+
```tsx
|
|
89
|
+
import { useCreateStore } from '@quantajs/react';
|
|
90
|
+
|
|
91
|
+
function TodoComponent() {
|
|
92
|
+
const todoStore = useCreateStore(
|
|
93
|
+
'todos',
|
|
94
|
+
() => ({ todos: [] }),
|
|
95
|
+
undefined,
|
|
96
|
+
{
|
|
97
|
+
addTodo(text: string) {
|
|
98
|
+
this.todos.push({ id: Date.now(), text, done: false });
|
|
99
|
+
},
|
|
100
|
+
},
|
|
101
|
+
);
|
|
102
|
+
|
|
103
|
+
return (
|
|
104
|
+
<div>
|
|
105
|
+
<button onClick={() => todoStore.addTodo('New task')}>
|
|
106
|
+
Add Todo
|
|
107
|
+
</button>
|
|
108
|
+
<p>Todos: {todoStore.todos.length}</p>
|
|
109
|
+
</div>
|
|
110
|
+
);
|
|
111
|
+
}
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
## 🔧 API
|
|
115
|
+
|
|
116
|
+
### Hooks
|
|
117
|
+
|
|
118
|
+
- `useQuantaStore(store, selector?)` - Subscribe to store with optional selector
|
|
119
|
+
- `useStore(selector?)` - Access store from QuantaProvider context
|
|
120
|
+
- `useCreateStore(name, state, getters?, actions?)` - Create component-scoped store
|
|
121
|
+
|
|
122
|
+
### Components
|
|
123
|
+
|
|
124
|
+
- `<QuantaProvider store={store}>` - Provide store to child components
|
|
125
|
+
|
|
126
|
+
### Core Features
|
|
127
|
+
|
|
128
|
+
- `createStore`, `reactive`, `computed`, `watch` - Re-exported from @quantajs/core
|
|
129
|
+
|
|
130
|
+
## 📜 License
|
|
131
|
+
|
|
132
|
+
This project is licensed under the MIT [License](https://github.com/quanta-js/quanta/blob/main/LICENSE) - see the LICENSE file for details.
|
|
133
|
+
|
|
134
|
+
## 💬 Contributing
|
|
135
|
+
|
|
136
|
+
We welcome contributions! Feel free to open issues, submit PRs, or suggest improvements.
|
|
137
|
+
|
|
138
|
+
## ⭐ Support
|
|
139
|
+
|
|
140
|
+
If you find this library useful, consider giving it a ⭐ star on [GitHub](https://github.com/quanta-js/quanta)!
|
package/LICENSE
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2025 QuantaJS
|
|
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.
|