@quantajs/react 2.0.0-beta.2 → 2.0.0-beta.3
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 +4 -4
- package/dist/index.d.ts +3 -0
- package/dist/index.js +241 -173
- package/package.json +2 -2
- package/readme.md +140 -140
package/dist/index.cjs
CHANGED
|
@@ -20,7 +20,7 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
|
20
20
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
21
|
SOFTWARE.
|
|
22
22
|
*/
|
|
23
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
23
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react"),u=require("@quantajs/core");function k(o,s){try{return p.useSyncExternalStore(o.subscribe,()=>{try{return s?s(o):o}catch(r){throw u.logger.error(`useQuantaStore: Failed to get store snapshot: ${r instanceof Error?r.message:String(r)}`),r}},()=>{try{return s?s(o):o}catch(r){throw u.logger.error(`useQuantaStore: Failed to get server snapshot: ${r instanceof Error?r.message:String(r)}`),r}})}catch(r){throw u.logger.error(`useQuantaStore: Hook execution failed: ${r instanceof Error?r.message:String(r)}`),r}}const y=p.createContext({stores:{}});function q(){try{const o=p.useContext(y);if(!o){const s="useQuantaContext must be used within a QuantaProvider";throw u.logger.error(`QuantaContext: ${s}`),new Error(s)}return o}catch(o){throw u.logger.error(`QuantaContext: Failed to access context: ${o instanceof Error?o.message:String(o)}`),o}}function ae(o,s){try{const{stores:r}=q(),f=r[o];if(!f){const n=`Store with name "${o}" does not exist in the context.`;throw u.logger.error(`useStore: ${n}`),new Error(n)}return s?k(f,s):k(f)}catch(r){throw u.logger.error(`useStore: Failed to access store "${o}": ${r instanceof Error?r.message:String(r)}`),r}}function se(o,s,r,f){try{const n=p.useRef(void 0);if(!n.current)try{n.current=u.createStore(o,{state:s,getters:r,actions:f})}catch(l){throw u.logger.error(`useCreateStore: Failed to create store "${o}": ${l instanceof Error?l.message:String(l)}`),l}return n.current}catch(n){throw u.logger.error(`useCreateStore: Hook execution failed: ${n instanceof Error?n.message:String(n)}`),n}}var _={exports:{}},v={};/**
|
|
24
24
|
* @license React
|
|
25
25
|
* react-jsx-runtime.production.js
|
|
26
26
|
*
|
|
@@ -28,7 +28,7 @@ SOFTWARE.
|
|
|
28
28
|
*
|
|
29
29
|
* This source code is licensed under the MIT license found in the
|
|
30
30
|
* LICENSE file in the root directory of this source tree.
|
|
31
|
-
*/var
|
|
31
|
+
*/var D;function ue(){if(D)return v;D=1;var o=Symbol.for("react.transitional.element"),s=Symbol.for("react.fragment");function r(f,n,l){var E=null;if(l!==void 0&&(E=""+l),n.key!==void 0&&(E=""+n.key),"key"in n){l={};for(var b in n)b!=="key"&&(l[b]=n[b])}else l=n;return n=l.ref,{$$typeof:o,type:f,key:E,ref:n!==void 0?n:null,props:l}}return v.Fragment=s,v.jsx=r,v.jsxs=r,v}var R={};/**
|
|
32
32
|
* @license React
|
|
33
33
|
* react-jsx-runtime.development.js
|
|
34
34
|
*
|
|
@@ -36,9 +36,9 @@ SOFTWARE.
|
|
|
36
36
|
*
|
|
37
37
|
* This source code is licensed under the MIT license found in the
|
|
38
38
|
* LICENSE file in the root directory of this source tree.
|
|
39
|
-
*/var
|
|
39
|
+
*/var L;function ce(){return L||(L=1,process.env.NODE_ENV!=="production"&&function(){function o(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===te?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case h:return"Fragment";case G:return"Profiler";case V:return"StrictMode";case Z:return"Suspense";case K:return"SuspenseList";case re:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case z:return"Portal";case H:return(e.displayName||"Context")+".Provider";case X:return(e._context.displayName||"Context")+".Consumer";case B:var t=e.render;return e=e.displayName,e||(e=t.displayName||t.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ee:return t=e.displayName||null,t!==null?t:o(e.type)||"Memo";case N:t=e._payload,e=e._init;try{return o(e(t))}catch{}}return null}function s(e){return""+e}function r(e){try{s(e);var t=!1}catch{t=!0}if(t){t=console;var a=t.error,c=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return a.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",c),s(e)}}function f(e){if(e===h)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===N)return"<...>";try{var t=o(e);return t?"<"+t+">":"<...>"}catch{return"<...>"}}function n(){var e=T.A;return e===null?null:e.getOwner()}function l(){return Error("react-stack-top-frame")}function E(e){if($.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function b(e,t){function a(){F||(F=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",t))}a.isReactWarning=!0,Object.defineProperty(e,"key",{get:a,configurable:!0})}function U(){var e=o(this.type);return Y[e]||(Y[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function J(e,t,a,c,m,d,x,P){return a=d.ref,e={$$typeof:C,type:e,key:t,props:d,_owner:m},(a!==void 0?a:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:U}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:x}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:P}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function j(e,t,a,c,m,d,x,P){var i=t.children;if(i!==void 0)if(c)if(oe(i)){for(c=0;c<i.length;c++)A(i[c]);Object.freeze&&Object.freeze(i)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else A(i);if($.call(t,"key")){i=o(e);var g=Object.keys(t).filter(function(ne){return ne!=="key"});c=0<g.length?"{key: someKey, "+g.join(": ..., ")+": ...}":"{key: someKey}",M[i+c]||(g=0<g.length?"{"+g.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
|
|
40
40
|
let props = %s;
|
|
41
41
|
<%s {...props} />
|
|
42
42
|
React keys must be passed directly to JSX without using spread:
|
|
43
43
|
let props = %s;
|
|
44
|
-
<%s key={someKey} {...props} />`,
|
|
44
|
+
<%s key={someKey} {...props} />`,c,i,g,i),M[i+c]=!0)}if(i=null,a!==void 0&&(r(a),i=""+a),E(t)&&(r(t.key),i=""+t.key),"key"in t){a={};for(var O in t)O!=="key"&&(a[O]=t[O])}else a=t;return i&&b(a,typeof e=="function"?e.displayName||e.name||"Unknown":e),J(e,i,d,m,n(),a,x,P)}function A(e){typeof e=="object"&&e!==null&&e.$$typeof===C&&e._store&&(e._store.validated=1)}var S=p,C=Symbol.for("react.transitional.element"),z=Symbol.for("react.portal"),h=Symbol.for("react.fragment"),V=Symbol.for("react.strict_mode"),G=Symbol.for("react.profiler"),X=Symbol.for("react.consumer"),H=Symbol.for("react.context"),B=Symbol.for("react.forward_ref"),Z=Symbol.for("react.suspense"),K=Symbol.for("react.suspense_list"),ee=Symbol.for("react.memo"),N=Symbol.for("react.lazy"),re=Symbol.for("react.activity"),te=Symbol.for("react.client.reference"),T=S.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,$=Object.prototype.hasOwnProperty,oe=Array.isArray,w=console.createTask?console.createTask:function(){return null};S={react_stack_bottom_frame:function(e){return e()}};var F,Y={},Q=S.react_stack_bottom_frame.bind(S,l)(),I=w(f(l)),M={};R.Fragment=h,R.jsx=function(e,t,a,c,m){var d=1e4>T.recentlyCreatedOwnerStacks++;return j(e,t,a,!1,c,m,d?Error("react-stack-top-frame"):Q,d?w(f(e)):I)},R.jsxs=function(e,t,a,c,m){var d=1e4>T.recentlyCreatedOwnerStacks++;return j(e,t,a,!0,c,m,d?Error("react-stack-top-frame"):Q,d?w(f(e)):I)}}()),R}var W;function ie(){return W||(W=1,process.env.NODE_ENV==="production"?_.exports=ue():_.exports=ce()),_.exports}var le=ie();function fe({stores:o,children:s}){try{if(!o||typeof o!="object"){const r="QuantaProvider: Invalid stores prop provided";throw u.logger.error(r),new Error(r)}for(const[r,f]of Object.entries(o))if(!f||typeof f!="object"){const n=`QuantaProvider: Invalid store "${r}" provided`;throw u.logger.error(n),new Error(n)}return le.jsx(y.Provider,{value:{stores:o},children:s})}catch(r){throw u.logger.error(`QuantaProvider: Failed to render provider: ${r instanceof Error?r.message:String(r)}`),r}}Object.defineProperty(exports,"computed",{enumerable:!0,get:()=>u.computed});Object.defineProperty(exports,"createStore",{enumerable:!0,get:()=>u.createStore});Object.defineProperty(exports,"logger",{enumerable:!0,get:()=>u.logger});Object.defineProperty(exports,"reactive",{enumerable:!0,get:()=>u.reactive});Object.defineProperty(exports,"watch",{enumerable:!0,get:()=>u.watch});exports.QuantaContext=y;exports.QuantaProvider=fe;exports.useCreateStore=se;exports.useQuantaContext=q;exports.useQuantaStore=k;exports.useStore=ae;
|
package/dist/index.d.ts
CHANGED
|
@@ -4,6 +4,7 @@ import { Context } from 'react';
|
|
|
4
4
|
import { createStore } from '@quantajs/core';
|
|
5
5
|
import { GetterDefinition } from '@quantajs/core';
|
|
6
6
|
import { JSX } from 'react/jsx-runtime';
|
|
7
|
+
import { logger } from '@quantajs/core';
|
|
7
8
|
import { reactive } from '@quantajs/core';
|
|
8
9
|
import { ReactNode } from 'react';
|
|
9
10
|
import { StateDefinition } from '@quantajs/core';
|
|
@@ -20,6 +21,8 @@ export { createStore }
|
|
|
20
21
|
|
|
21
22
|
export { GetterDefinition }
|
|
22
23
|
|
|
24
|
+
export { logger }
|
|
25
|
+
|
|
23
26
|
export declare const QuantaContext: Context<QuantaContextValue>;
|
|
24
27
|
|
|
25
28
|
declare interface QuantaContextValue {
|
package/dist/index.js
CHANGED
|
@@ -20,38 +20,90 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
|
20
20
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
21
|
SOFTWARE.
|
|
22
22
|
*/
|
|
23
|
-
import
|
|
24
|
-
import { createStore as
|
|
25
|
-
import { computed as
|
|
26
|
-
function I(
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
23
|
+
import oe, { useSyncExternalStore as ne, createContext as ae, useContext as se, useRef as ue } from "react";
|
|
24
|
+
import { logger as f, createStore as ce } from "@quantajs/core";
|
|
25
|
+
import { computed as ge, createStore as he, logger as Te, reactive as we, watch as xe } from "@quantajs/core";
|
|
26
|
+
function I(o, s) {
|
|
27
|
+
try {
|
|
28
|
+
return ne(
|
|
29
|
+
o.subscribe,
|
|
30
|
+
() => {
|
|
31
|
+
try {
|
|
32
|
+
return s ? s(o) : o;
|
|
33
|
+
} catch (r) {
|
|
34
|
+
throw f.error(
|
|
35
|
+
`useQuantaStore: Failed to get store snapshot: ${r instanceof Error ? r.message : String(r)}`
|
|
36
|
+
), r;
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
() => {
|
|
40
|
+
try {
|
|
41
|
+
return s ? s(o) : o;
|
|
42
|
+
} catch (r) {
|
|
43
|
+
throw f.error(
|
|
44
|
+
`useQuantaStore: Failed to get server snapshot: ${r instanceof Error ? r.message : String(r)}`
|
|
45
|
+
), r;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
39
48
|
);
|
|
40
|
-
|
|
49
|
+
} catch (r) {
|
|
50
|
+
throw f.error(
|
|
51
|
+
`useQuantaStore: Hook execution failed: ${r instanceof Error ? r.message : String(r)}`
|
|
52
|
+
), r;
|
|
53
|
+
}
|
|
41
54
|
}
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
55
|
+
const L = ae({ stores: {} });
|
|
56
|
+
function ie() {
|
|
57
|
+
try {
|
|
58
|
+
const o = se(L);
|
|
59
|
+
if (!o) {
|
|
60
|
+
const s = "useQuantaContext must be used within a QuantaProvider";
|
|
61
|
+
throw f.error(`QuantaContext: ${s}`), new Error(s);
|
|
62
|
+
}
|
|
63
|
+
return o;
|
|
64
|
+
} catch (o) {
|
|
65
|
+
throw f.error(
|
|
66
|
+
`QuantaContext: Failed to access context: ${o instanceof Error ? o.message : String(o)}`
|
|
67
|
+
), o;
|
|
68
|
+
}
|
|
49
69
|
}
|
|
50
|
-
function
|
|
51
|
-
|
|
52
|
-
|
|
70
|
+
function be(o, s) {
|
|
71
|
+
try {
|
|
72
|
+
const { stores: r } = ie(), l = r[o];
|
|
73
|
+
if (!l) {
|
|
74
|
+
const n = `Store with name "${o}" does not exist in the context.`;
|
|
75
|
+
throw f.error(`useStore: ${n}`), new Error(n);
|
|
76
|
+
}
|
|
77
|
+
return s ? I(l, s) : I(l);
|
|
78
|
+
} catch (r) {
|
|
79
|
+
throw f.error(
|
|
80
|
+
`useStore: Failed to access store "${o}": ${r instanceof Error ? r.message : String(r)}`
|
|
81
|
+
), r;
|
|
82
|
+
}
|
|
53
83
|
}
|
|
54
|
-
|
|
84
|
+
function Re(o, s, r, l) {
|
|
85
|
+
try {
|
|
86
|
+
const n = ue(void 0);
|
|
87
|
+
if (!n.current)
|
|
88
|
+
try {
|
|
89
|
+
n.current = ce(o, {
|
|
90
|
+
state: s,
|
|
91
|
+
getters: r,
|
|
92
|
+
actions: l
|
|
93
|
+
});
|
|
94
|
+
} catch (i) {
|
|
95
|
+
throw f.error(
|
|
96
|
+
`useCreateStore: Failed to create store "${o}": ${i instanceof Error ? i.message : String(i)}`
|
|
97
|
+
), i;
|
|
98
|
+
}
|
|
99
|
+
return n.current;
|
|
100
|
+
} catch (n) {
|
|
101
|
+
throw f.error(
|
|
102
|
+
`useCreateStore: Hook execution failed: ${n instanceof Error ? n.message : String(n)}`
|
|
103
|
+
), n;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
var S = { exports: {} }, R = {};
|
|
55
107
|
/**
|
|
56
108
|
* @license React
|
|
57
109
|
* react-jsx-runtime.production.js
|
|
@@ -61,29 +113,29 @@ var T = { exports: {} }, _ = {};
|
|
|
61
113
|
* This source code is licensed under the MIT license found in the
|
|
62
114
|
* LICENSE file in the root directory of this source tree.
|
|
63
115
|
*/
|
|
64
|
-
var
|
|
65
|
-
function
|
|
66
|
-
if (
|
|
67
|
-
|
|
68
|
-
var
|
|
69
|
-
function
|
|
70
|
-
var
|
|
71
|
-
if (i !== void 0 && (
|
|
116
|
+
var M;
|
|
117
|
+
function le() {
|
|
118
|
+
if (M) return R;
|
|
119
|
+
M = 1;
|
|
120
|
+
var o = Symbol.for("react.transitional.element"), s = Symbol.for("react.fragment");
|
|
121
|
+
function r(l, n, i) {
|
|
122
|
+
var v = null;
|
|
123
|
+
if (i !== void 0 && (v = "" + i), n.key !== void 0 && (v = "" + n.key), "key" in n) {
|
|
72
124
|
i = {};
|
|
73
|
-
for (var
|
|
74
|
-
|
|
75
|
-
} else i =
|
|
76
|
-
return
|
|
77
|
-
$$typeof:
|
|
78
|
-
type:
|
|
79
|
-
key:
|
|
80
|
-
ref:
|
|
125
|
+
for (var b in n)
|
|
126
|
+
b !== "key" && (i[b] = n[b]);
|
|
127
|
+
} else i = n;
|
|
128
|
+
return n = i.ref, {
|
|
129
|
+
$$typeof: o,
|
|
130
|
+
type: l,
|
|
131
|
+
key: v,
|
|
132
|
+
ref: n !== void 0 ? n : null,
|
|
81
133
|
props: i
|
|
82
134
|
};
|
|
83
135
|
}
|
|
84
|
-
return
|
|
136
|
+
return R.Fragment = s, R.jsx = r, R.jsxs = r, R;
|
|
85
137
|
}
|
|
86
|
-
var
|
|
138
|
+
var _ = {};
|
|
87
139
|
/**
|
|
88
140
|
* @license React
|
|
89
141
|
* react-jsx-runtime.development.js
|
|
@@ -93,26 +145,26 @@ var b = {};
|
|
|
93
145
|
* This source code is licensed under the MIT license found in the
|
|
94
146
|
* LICENSE file in the root directory of this source tree.
|
|
95
147
|
*/
|
|
96
|
-
var
|
|
97
|
-
function
|
|
98
|
-
return
|
|
99
|
-
function
|
|
148
|
+
var Q;
|
|
149
|
+
function fe() {
|
|
150
|
+
return Q || (Q = 1, process.env.NODE_ENV !== "production" && function() {
|
|
151
|
+
function o(e) {
|
|
100
152
|
if (e == null) return null;
|
|
101
153
|
if (typeof e == "function")
|
|
102
|
-
return e.$$typeof ===
|
|
154
|
+
return e.$$typeof === ee ? null : e.displayName || e.name || null;
|
|
103
155
|
if (typeof e == "string") return e;
|
|
104
156
|
switch (e) {
|
|
105
|
-
case
|
|
157
|
+
case g:
|
|
106
158
|
return "Fragment";
|
|
107
159
|
case z:
|
|
108
160
|
return "Profiler";
|
|
109
161
|
case J:
|
|
110
162
|
return "StrictMode";
|
|
111
|
-
case
|
|
163
|
+
case H:
|
|
112
164
|
return "Suspense";
|
|
113
165
|
case B:
|
|
114
166
|
return "SuspenseList";
|
|
115
|
-
case
|
|
167
|
+
case K:
|
|
116
168
|
return "Activity";
|
|
117
169
|
}
|
|
118
170
|
if (typeof e == "object")
|
|
@@ -121,95 +173,95 @@ function le() {
|
|
|
121
173
|
), e.$$typeof) {
|
|
122
174
|
case q:
|
|
123
175
|
return "Portal";
|
|
124
|
-
case
|
|
176
|
+
case G:
|
|
125
177
|
return (e.displayName || "Context") + ".Provider";
|
|
126
|
-
case
|
|
178
|
+
case V:
|
|
127
179
|
return (e._context.displayName || "Context") + ".Consumer";
|
|
128
|
-
case
|
|
129
|
-
var
|
|
130
|
-
return e = e.displayName, e || (e =
|
|
131
|
-
case
|
|
132
|
-
return
|
|
133
|
-
case
|
|
134
|
-
|
|
180
|
+
case X:
|
|
181
|
+
var t = e.render;
|
|
182
|
+
return e = e.displayName, e || (e = t.displayName || t.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
|
|
183
|
+
case Z:
|
|
184
|
+
return t = e.displayName || null, t !== null ? t : o(e.type) || "Memo";
|
|
185
|
+
case A:
|
|
186
|
+
t = e._payload, e = e._init;
|
|
135
187
|
try {
|
|
136
|
-
return
|
|
188
|
+
return o(e(t));
|
|
137
189
|
} catch {
|
|
138
190
|
}
|
|
139
191
|
}
|
|
140
192
|
return null;
|
|
141
193
|
}
|
|
142
|
-
function
|
|
194
|
+
function s(e) {
|
|
143
195
|
return "" + e;
|
|
144
196
|
}
|
|
145
|
-
function
|
|
197
|
+
function r(e) {
|
|
146
198
|
try {
|
|
147
|
-
|
|
148
|
-
var
|
|
199
|
+
s(e);
|
|
200
|
+
var t = !1;
|
|
149
201
|
} catch {
|
|
150
|
-
|
|
202
|
+
t = !0;
|
|
151
203
|
}
|
|
152
|
-
if (
|
|
153
|
-
|
|
154
|
-
var
|
|
155
|
-
return
|
|
156
|
-
|
|
204
|
+
if (t) {
|
|
205
|
+
t = console;
|
|
206
|
+
var a = t.error, u = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
|
|
207
|
+
return a.call(
|
|
208
|
+
t,
|
|
157
209
|
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
|
|
158
|
-
|
|
159
|
-
),
|
|
210
|
+
u
|
|
211
|
+
), s(e);
|
|
160
212
|
}
|
|
161
213
|
}
|
|
162
|
-
function
|
|
163
|
-
if (e ===
|
|
164
|
-
if (typeof e == "object" && e !== null && e.$$typeof ===
|
|
214
|
+
function l(e) {
|
|
215
|
+
if (e === g) return "<>";
|
|
216
|
+
if (typeof e == "object" && e !== null && e.$$typeof === A)
|
|
165
217
|
return "<...>";
|
|
166
218
|
try {
|
|
167
|
-
var
|
|
168
|
-
return
|
|
219
|
+
var t = o(e);
|
|
220
|
+
return t ? "<" + t + ">" : "<...>";
|
|
169
221
|
} catch {
|
|
170
222
|
return "<...>";
|
|
171
223
|
}
|
|
172
224
|
}
|
|
173
|
-
function
|
|
174
|
-
var e =
|
|
225
|
+
function n() {
|
|
226
|
+
var e = h.A;
|
|
175
227
|
return e === null ? null : e.getOwner();
|
|
176
228
|
}
|
|
177
229
|
function i() {
|
|
178
230
|
return Error("react-stack-top-frame");
|
|
179
231
|
}
|
|
180
|
-
function
|
|
181
|
-
if (
|
|
182
|
-
var
|
|
183
|
-
if (
|
|
232
|
+
function v(e) {
|
|
233
|
+
if (j.call(e, "key")) {
|
|
234
|
+
var t = Object.getOwnPropertyDescriptor(e, "key").get;
|
|
235
|
+
if (t && t.isReactWarning) return !1;
|
|
184
236
|
}
|
|
185
237
|
return e.key !== void 0;
|
|
186
238
|
}
|
|
187
|
-
function
|
|
188
|
-
function
|
|
189
|
-
|
|
239
|
+
function b(e, t) {
|
|
240
|
+
function a() {
|
|
241
|
+
C || (C = !0, console.error(
|
|
190
242
|
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
|
|
191
|
-
|
|
243
|
+
t
|
|
192
244
|
));
|
|
193
245
|
}
|
|
194
|
-
|
|
195
|
-
get:
|
|
246
|
+
a.isReactWarning = !0, Object.defineProperty(e, "key", {
|
|
247
|
+
get: a,
|
|
196
248
|
configurable: !0
|
|
197
249
|
});
|
|
198
250
|
}
|
|
199
251
|
function W() {
|
|
200
|
-
var e =
|
|
201
|
-
return
|
|
252
|
+
var e = o(this.type);
|
|
253
|
+
return N[e] || (N[e] = !0, console.error(
|
|
202
254
|
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
|
|
203
255
|
)), e = this.props.ref, e !== void 0 ? e : null;
|
|
204
256
|
}
|
|
205
|
-
function U(e,
|
|
206
|
-
return
|
|
207
|
-
$$typeof:
|
|
257
|
+
function U(e, t, a, u, m, d, w, x) {
|
|
258
|
+
return a = d.ref, e = {
|
|
259
|
+
$$typeof: y,
|
|
208
260
|
type: e,
|
|
209
|
-
key:
|
|
210
|
-
props:
|
|
211
|
-
_owner:
|
|
212
|
-
}, (
|
|
261
|
+
key: t,
|
|
262
|
+
props: d,
|
|
263
|
+
_owner: m
|
|
264
|
+
}, (a !== void 0 ? a : null) !== null ? Object.defineProperty(e, "ref", {
|
|
213
265
|
enumerable: !1,
|
|
214
266
|
get: W
|
|
215
267
|
}) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
|
|
@@ -226,123 +278,139 @@ function le() {
|
|
|
226
278
|
configurable: !1,
|
|
227
279
|
enumerable: !1,
|
|
228
280
|
writable: !0,
|
|
229
|
-
value:
|
|
281
|
+
value: w
|
|
230
282
|
}), Object.defineProperty(e, "_debugTask", {
|
|
231
283
|
configurable: !1,
|
|
232
284
|
enumerable: !1,
|
|
233
285
|
writable: !0,
|
|
234
|
-
value:
|
|
286
|
+
value: x
|
|
235
287
|
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
|
|
236
288
|
}
|
|
237
|
-
function P(e,
|
|
238
|
-
var
|
|
239
|
-
if (
|
|
240
|
-
if (
|
|
241
|
-
if (
|
|
242
|
-
for (
|
|
243
|
-
|
|
244
|
-
Object.freeze && Object.freeze(
|
|
289
|
+
function P(e, t, a, u, m, d, w, x) {
|
|
290
|
+
var c = t.children;
|
|
291
|
+
if (c !== void 0)
|
|
292
|
+
if (u)
|
|
293
|
+
if (re(c)) {
|
|
294
|
+
for (u = 0; u < c.length; u++)
|
|
295
|
+
O(c[u]);
|
|
296
|
+
Object.freeze && Object.freeze(c);
|
|
245
297
|
} else
|
|
246
298
|
console.error(
|
|
247
299
|
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
|
|
248
300
|
);
|
|
249
|
-
else
|
|
250
|
-
if (
|
|
251
|
-
|
|
252
|
-
var
|
|
253
|
-
return
|
|
301
|
+
else O(c);
|
|
302
|
+
if (j.call(t, "key")) {
|
|
303
|
+
c = o(e);
|
|
304
|
+
var E = Object.keys(t).filter(function(te) {
|
|
305
|
+
return te !== "key";
|
|
254
306
|
});
|
|
255
|
-
|
|
307
|
+
u = 0 < E.length ? "{key: someKey, " + E.join(": ..., ") + ": ...}" : "{key: someKey}", Y[c + u] || (E = 0 < E.length ? "{" + E.join(": ..., ") + ": ...}" : "{}", console.error(
|
|
256
308
|
`A props object containing a "key" prop is being spread into JSX:
|
|
257
309
|
let props = %s;
|
|
258
310
|
<%s {...props} />
|
|
259
311
|
React keys must be passed directly to JSX without using spread:
|
|
260
312
|
let props = %s;
|
|
261
313
|
<%s key={someKey} {...props} />`,
|
|
262
|
-
a,
|
|
263
314
|
u,
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
315
|
+
c,
|
|
316
|
+
E,
|
|
317
|
+
c
|
|
318
|
+
), Y[c + u] = !0);
|
|
267
319
|
}
|
|
268
|
-
if (
|
|
269
|
-
|
|
270
|
-
for (var
|
|
271
|
-
|
|
272
|
-
} else
|
|
273
|
-
return
|
|
274
|
-
|
|
320
|
+
if (c = null, a !== void 0 && (r(a), c = "" + a), v(t) && (r(t.key), c = "" + t.key), "key" in t) {
|
|
321
|
+
a = {};
|
|
322
|
+
for (var k in t)
|
|
323
|
+
k !== "key" && (a[k] = t[k]);
|
|
324
|
+
} else a = t;
|
|
325
|
+
return c && b(
|
|
326
|
+
a,
|
|
275
327
|
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
|
|
276
328
|
), U(
|
|
277
329
|
e,
|
|
278
|
-
|
|
279
|
-
l,
|
|
330
|
+
c,
|
|
280
331
|
d,
|
|
281
|
-
|
|
282
|
-
n,
|
|
283
|
-
|
|
284
|
-
w
|
|
332
|
+
m,
|
|
333
|
+
n(),
|
|
334
|
+
a,
|
|
335
|
+
w,
|
|
336
|
+
x
|
|
285
337
|
);
|
|
286
338
|
}
|
|
287
|
-
function
|
|
288
|
-
typeof e == "object" && e !== null && e.$$typeof ===
|
|
339
|
+
function O(e) {
|
|
340
|
+
typeof e == "object" && e !== null && e.$$typeof === y && e._store && (e._store.validated = 1);
|
|
289
341
|
}
|
|
290
|
-
var
|
|
342
|
+
var p = oe, y = Symbol.for("react.transitional.element"), q = Symbol.for("react.portal"), g = Symbol.for("react.fragment"), J = Symbol.for("react.strict_mode"), z = Symbol.for("react.profiler"), V = Symbol.for("react.consumer"), G = Symbol.for("react.context"), X = Symbol.for("react.forward_ref"), H = Symbol.for("react.suspense"), B = Symbol.for("react.suspense_list"), Z = Symbol.for("react.memo"), A = Symbol.for("react.lazy"), K = Symbol.for("react.activity"), ee = Symbol.for("react.client.reference"), h = p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, j = Object.prototype.hasOwnProperty, re = Array.isArray, T = console.createTask ? console.createTask : function() {
|
|
291
343
|
return null;
|
|
292
344
|
};
|
|
293
|
-
|
|
345
|
+
p = {
|
|
294
346
|
react_stack_bottom_frame: function(e) {
|
|
295
347
|
return e();
|
|
296
348
|
}
|
|
297
349
|
};
|
|
298
|
-
var
|
|
299
|
-
|
|
350
|
+
var C, N = {}, $ = p.react_stack_bottom_frame.bind(
|
|
351
|
+
p,
|
|
300
352
|
i
|
|
301
|
-
)(),
|
|
302
|
-
|
|
303
|
-
var
|
|
353
|
+
)(), F = T(l(i)), Y = {};
|
|
354
|
+
_.Fragment = g, _.jsx = function(e, t, a, u, m) {
|
|
355
|
+
var d = 1e4 > h.recentlyCreatedOwnerStacks++;
|
|
304
356
|
return P(
|
|
305
357
|
e,
|
|
306
|
-
|
|
307
|
-
n,
|
|
308
|
-
!1,
|
|
358
|
+
t,
|
|
309
359
|
a,
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
360
|
+
!1,
|
|
361
|
+
u,
|
|
362
|
+
m,
|
|
363
|
+
d ? Error("react-stack-top-frame") : $,
|
|
364
|
+
d ? T(l(e)) : F
|
|
313
365
|
);
|
|
314
|
-
},
|
|
315
|
-
var
|
|
366
|
+
}, _.jsxs = function(e, t, a, u, m) {
|
|
367
|
+
var d = 1e4 > h.recentlyCreatedOwnerStacks++;
|
|
316
368
|
return P(
|
|
317
369
|
e,
|
|
318
|
-
|
|
319
|
-
n,
|
|
320
|
-
!0,
|
|
370
|
+
t,
|
|
321
371
|
a,
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
372
|
+
!0,
|
|
373
|
+
u,
|
|
374
|
+
m,
|
|
375
|
+
d ? Error("react-stack-top-frame") : $,
|
|
376
|
+
d ? T(l(e)) : F
|
|
325
377
|
);
|
|
326
378
|
};
|
|
327
|
-
}()),
|
|
379
|
+
}()), _;
|
|
328
380
|
}
|
|
329
|
-
var
|
|
330
|
-
function
|
|
331
|
-
return
|
|
381
|
+
var D;
|
|
382
|
+
function de() {
|
|
383
|
+
return D || (D = 1, process.env.NODE_ENV === "production" ? S.exports = le() : S.exports = fe()), S.exports;
|
|
332
384
|
}
|
|
333
|
-
var
|
|
334
|
-
function
|
|
335
|
-
|
|
385
|
+
var me = de();
|
|
386
|
+
function _e({ stores: o, children: s }) {
|
|
387
|
+
try {
|
|
388
|
+
if (!o || typeof o != "object") {
|
|
389
|
+
const r = "QuantaProvider: Invalid stores prop provided";
|
|
390
|
+
throw f.error(r), new Error(r);
|
|
391
|
+
}
|
|
392
|
+
for (const [r, l] of Object.entries(o))
|
|
393
|
+
if (!l || typeof l != "object") {
|
|
394
|
+
const n = `QuantaProvider: Invalid store "${r}" provided`;
|
|
395
|
+
throw f.error(n), new Error(n);
|
|
396
|
+
}
|
|
397
|
+
return /* @__PURE__ */ me.jsx(L.Provider, { value: { stores: o }, children: s });
|
|
398
|
+
} catch (r) {
|
|
399
|
+
throw f.error(
|
|
400
|
+
`QuantaProvider: Failed to render provider: ${r instanceof Error ? r.message : String(r)}`
|
|
401
|
+
), r;
|
|
402
|
+
}
|
|
336
403
|
}
|
|
337
404
|
export {
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
405
|
+
L as QuantaContext,
|
|
406
|
+
_e as QuantaProvider,
|
|
407
|
+
ge as computed,
|
|
408
|
+
he as createStore,
|
|
409
|
+
Te as logger,
|
|
410
|
+
we as reactive,
|
|
411
|
+
Re as useCreateStore,
|
|
412
|
+
ie as useQuantaContext,
|
|
345
413
|
I as useQuantaStore,
|
|
346
|
-
|
|
414
|
+
be as useStore,
|
|
347
415
|
xe as watch
|
|
348
416
|
};
|
package/package.json
CHANGED
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"url": "https://github.com/quanta-js/quanta/issues"
|
|
23
23
|
},
|
|
24
24
|
"homepage": "https://quantajs.com",
|
|
25
|
-
"version": "2.0.0-beta.
|
|
25
|
+
"version": "2.0.0-beta.3",
|
|
26
26
|
"type": "module",
|
|
27
27
|
"license": "MIT",
|
|
28
28
|
"main": "./dist/index.js",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"react": ">=16.8.0"
|
|
44
44
|
},
|
|
45
45
|
"dependencies": {
|
|
46
|
-
"@quantajs/core": "2.0.0-beta.
|
|
46
|
+
"@quantajs/core": "2.0.0-beta.3"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
49
|
"@types/react": "^19.1.9",
|
package/readme.md
CHANGED
|
@@ -1,140 +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
|
-
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)!
|
|
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)!
|