@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/package.json CHANGED
@@ -1,61 +1,66 @@
1
1
  {
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.1",
26
- "type": "module",
27
- "license": "MIT",
28
- "main": "./dist/index.js",
29
- "module": "./dist/index.js",
30
- "types": "./dist/index.d.ts",
31
- "exports": {
32
- ".": {
33
- "types": "./dist/index.d.ts",
34
- "import": "./dist/index.js",
35
- "require": "./dist/index.cjs"
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
- ![Logo](https://raw.githubusercontent.com/quanta-js/quanta/master/assets/quantajs_banner.png)
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() { this.count++; },
41
- decrement() { this.count--; }
42
- }
43
- });
44
-
45
- // Component
46
- function Counter() {
47
- const store = useStore();
48
-
49
- return (
50
- <div>
51
- <p>Count: {store.count}</p>
52
- <p>Double: {store.doubleCount}</p>
53
- <button onClick={() => store.increment()}>+</button>
54
- <button onClick={() => store.decrement()}>-</button>
55
- </div>
56
- );
57
- }
58
-
59
- // App
60
- function App() {
61
- return (
62
- <QuantaProvider store={counterStore}>
63
- <Counter />
64
- </QuantaProvider>
65
- );
66
- }
67
- ```
68
-
69
- ### With Selectors (Performance)
70
-
71
- ```tsx
72
- import { useQuantaStore } from '@quantajs/react';
73
-
74
- function CounterDisplay() {
75
- // Only re-render when count changes
76
- const count = useQuantaStore(counterStore, store => store.count);
77
-
78
- return <p>Count: {count}</p>;
79
- }
80
- ```
81
-
82
- ### Component-Scoped Store
83
-
84
- ```tsx
85
- import { useCreateStore } from '@quantajs/react';
86
-
87
- function TodoComponent() {
88
- const todoStore = useCreateStore(
89
- 'todos',
90
- () => ({ todos: [] }),
91
- undefined,
92
- {
93
- addTodo(text: string) {
94
- this.todos.push({ id: Date.now(), text, done: false });
95
- }
96
- }
97
- );
98
-
99
- return (
100
- <div>
101
- <button onClick={() => todoStore.addTodo('New task')}>
102
- Add Todo
103
- </button>
104
- <p>Todos: {todoStore.todos.length}</p>
105
- </div>
106
- );
107
- }
108
- ```
109
-
110
- ## 🔧 API
111
-
112
- ### Hooks
113
- - `useQuantaStore(store, selector?)` - Subscribe to store with optional selector
114
- - `useStore(selector?)` - Access store from QuantaProvider context
115
- - `useCreateStore(name, state, getters?, actions?)` - Create component-scoped store
116
-
117
- ### Components
118
- - `<QuantaProvider store={store}>` - Provide store to child components
119
-
120
- ### Core Features
121
- - `createStore`, `reactive`, `computed`, `watch` - Re-exported from @quantajs/core
122
-
123
- ## 📜 License
124
-
125
- This project is licensed under the MIT [License](https://github.com/quanta-js/quanta/blob/main/LICENSE) - see the LICENSE file for details.
126
-
127
- ## 💬 Contributing
128
-
129
- We welcome contributions! Feel free to open issues, submit PRs, or suggest improvements.
130
-
131
- ## ⭐ Support
132
-
133
- If you find this library useful, consider giving it a ⭐ star on [GitHub](https://github.com/quanta-js/quanta)!
1
+ # @quantajs/react
2
+
3
+ ![Logo](https://raw.githubusercontent.com/quanta-js/quanta/master/assets/quantajs_banner.png)
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.