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