@trakit/react 0.0.1 → 0.0.3

package/README.md

@@ -4,17 +4,25 @@ This library contains ReactJS controls, hooks, and contexts to assist in working
 
 ### Prerequisites
 
-The `@trakit/objects` and `@trakit/commands` packages are required since they contain the definitions for all the commands required to manipulate the objects.
+The `@trakit/objects`, `@trakit/commands` and `@trakit/sync` packages are required since they contain the definitions for all the commands required to manipulate the objects.
 
-In order to build this project, you need to install the RollupJS, and plugins for TypeScript and Minifying.
+In order to build this project, you need to install the ReactJS types, RollupJS, and plugins for TypeScript and Minifying.
 ```
-npm i rollup rollup-plugin-typescript2 @rollup/plugin-terser
+npm i @types/react rollup rollup-plugin-typescript2 @rollup/plugin-terser
 ```
 After those have been installed, build the project normally.
 ```
 rollup --config rollup.config.js
 ```
 
+### `useConnection` hook
+
+Used as the main hook for keeping a persistent connection.
+
+### `useSync` hook
+
+Used to synchronize the specified type(s) of objects with the system.  Internally, this hook uses `useConnection`.
+
 ## Questions and Feedback
 
 If you have any questions, please start for the project on GitHub

package/hooks/useSync.d.ts

@@ -1,11 +1,12 @@
 import { Reply } from '@trakit/commands';
 import { IBelongCompany, IRequestable, nothing, SyncName, ulong } from '@trakit/objects';
 /**
- * The result of the `useSync` hook.
+ * The result of the `useSync` hook and `useSingle` hook.
  */
-export type UseSyncResult<T> = {
+export interface UseSyncResult {
     /**
-     * Whether the hook is currently loading data. This will be `true` until the initial synchronization is complete, and may briefly become `true` again if the connection is lost and re-established.
+     * Whether the hook is currently loading data. This will be `true` until the initial synchronization
+     * is complete, and may briefly become `true` again if the connection is lost and re-established.
      */
     ready: boolean;
     /**
@@ -13,19 +14,41 @@ export type UseSyncResult<T> = {
      * This is normally not needed, but can be useful for debugging or error handling,
      * as it contains the {@link Reply} classes with {@link ErrorCode} and {@link ErrorDetail}.
      */
-    replies: Reply[];
+    replies: Reply[] | null;
+}
+/**
+ * The result of the `useSync` hook.
+ * This object behaves like a dictionary, where the {@link UseSyncResult} properties are combined with
+ * the synchronized objects of type `T` for each requested types.
+ */
+export type UseSyncMultiple<T extends IRequestable & IBelongCompany> = UseSyncResult & {
+    [key in SyncName]?: T[] | nothing;
+};
+/**
+ * The result of the `useSingle` hook.
+ * This is a combination of the {@link UseSyncResult} and the synchronized objects of type `T`
+ * for the given type, which are stored in an array.
+ */
+export type UseSyncSingle<T extends IRequestable & IBelongCompany> = UseSyncResult & {
     /**
-     * The list of synchronized objects of type `T`.
+     * The list of synchronized objects of the requested type.
      */
-    objects: T[];
+    objects: T[] | nothing;
 };
 /**
- * Subscribes to the given sync types for the current company, returning the
- * live list of synchronized objects and re-rendering the consumer whenever
- * that list changes.
+ * Subscribes to the given sync types for the given company, returning the live list of synchronized
+ * objects and re-rendering whenever any object, or part of that list changes.
+ * @param types		The {@link SyncName} array to subscribe to.
+ * @param companyId	Optional company ID to filter the synchronized objects. Default is your own company.
+ * @returns			An object containing the loading state, the list of replies, and the list(s) of synchronized objects.
+ */
+export declare function useSync<T extends IRequestable & IBelongCompany>(types: SyncName[], companyId?: ulong | nothing): UseSyncMultiple<T>;
+/**
+ * Subscribes to the given sync type for the given company, returning the live list of synchronized
+ * objects and re-rendering whenever any object, or part of that list changes.
  * @param type		The {@link SyncName} to subscribe to.
  * @param companyId	Optional company ID to filter the synchronized objects. Default is your own company.
  * @returns			An object containing the loading state, the list of replies, and the list of synchronized objects.
  */
-export default function useSync<T extends IRequestable & IBelongCompany>(type: SyncName, companyId?: ulong | nothing): UseSyncResult<T>;
+export declare function useSingle<T extends IRequestable & IBelongCompany>(type: SyncName, companyId?: ulong | nothing): UseSyncSingle<T>;
 //# sourceMappingURL=useSync.d.ts.map

package/index.d.ts

@@ -6,13 +6,13 @@
  */
 import useConnection, { UseConnectionResult } from "./hooks/useConnection";
 import useIsOnline from "./hooks/useIsOnline";
-import useSync, { UseSyncResult } from "./hooks/useSync";
+import { useSingle, useSync, UseSyncMultiple, UseSyncResult, UseSyncSingle } from "./hooks/useSync";
 /**
  * Version number for this release.
  */
-export declare const version = "0.0.1";
+export declare const version = "0.0.3";
 /**
  * Hooks
  */
-export { useConnection, useIsOnline, useSync, type UseConnectionResult, type UseSyncResult };
+export { useConnection, useIsOnline, useSingle, useSync, type UseConnectionResult, type UseSyncMultiple, type UseSyncResult, type UseSyncSingle };
 //# sourceMappingURL=index.d.ts.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@trakit/react",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "main": "./trakit-react.min.js",
   "types": "./index.d.ts",
   "scripts": {
@@ -26,7 +26,7 @@
     "url": "https://github.com/trakitwireless/trakit-ts-react/issues"
   },
   "homepage": "https://github.com/trakitwireless/trakit-ts-react#readme",
-  "description": "Trak-iT uses these object definitions to interact with all our APIs.",
+  "description": "ReactJS controls, hooks, and contexts to assist in working with Trak-iT's APIs.",
   "devDependencies": {
     "@rollup/plugin-terser": "^1.0.0",
     "rollup": "^4.35.0",
@@ -37,7 +37,8 @@
   "dependencies": {
     "@trakit/commands": "^0.1.2",
     "@trakit/objects": "^0.1.2",
-    "@trakit/sync": "^0.1.1",
-    "@types/react": "^19.2.17"
+    "@trakit/sync": "^0.1.2",
+    "@types/react": "^19.2.17",
+    "react-cookie": "^8.1.2"
   }
 }

package/trakit-react.min.js

@@ -1,7 +1,7 @@
-function n(n,o){function e(n){d(n.online)}function t(n){const{account:o}=n;p(o.user?.login&&o.expiry>new Date?o.ghostId:""),y(o.user||null),g(o.machine||null)}const r=s(new c(null,n||u.URI_PROD,o||l.URI_PROD)),[i,d]=f(r.current.socketOnline),[m,p]=f(r.current.account.ghostId||""),[w,y]=f(r.current.account.user||null),[h,g]=f(r.current.account.machine||null),b=i===!(!m&&!h);return a(()=>(r.current.on("open",e),r.current.on("error",e),r.current.on("close",e),r.current.on("account",t),()=>{r.current.off("open",e),r.current.off("error",e),r.current.off("close",e),r.current.off("account",t),r.current.dispose()}),[]),{synchronizer:r.current,ready:b,ghostId:m,online:i,user:w,machine:h}}function o(n){return window.addEventListener("online",n),window.addEventListener("offline",n),()=>{window.removeEventListener("online",n),window.removeEventListener("offline",n)}}function e(){return navigator.onLine}function t(){return!0}function r(){return d(o,e,t)}function i(o,e){const t=s(null),r=s(0),[i,c]=f(null),[u,d]=f(null),{synchronizer:p,ready:w,online:y,user:h,machine:g}=n();return a(()=>{function n(n,t){0!==r.current&&e===t&&o===n&&d([...m[n].values().filter(n=>n.companyId===e)])}function u(o){const{kind:e,companyId:t}=o;n(e,t)}function s(o){const{name:e,body:t}=o;n(l.msgNameToSyncName(e),t.company)}function f(){if(0===r.current){const n=i?.map(n=>n.syncName).filter(n=>!!n);n?.length&&p.desync(e,n),p.off("list",u),p.off("update",u),p.off("delete",u),p.off("message",s)}t.current=null}function a(t){c(t),n(o,e)}if(w&&o&&!isNaN(e))return r.current++,p.on("list",u),p.on("update",u),p.on("delete",u),p.on("message",s),t.current=p.sync(e,[o]),t.current.then(a,a),t.current.finally(f),()=>{r.current--,t.current||f()}},[w,y,e=e??h?.companyId??g?.companyId,o]),{ready:w&&y&&!!u&&!t.current,replies:i??[],objects:u??[]}}
+function n(n,e){function t(n){b(n.online)}function o(n){const{account:e}=n;e.user?.login&&e.expiry>new Date?(c(h,e.ghostId,{...x,expires:e.expiry}),j(e.ghostId||"")):u(h,x),z(e.user||null),e.machine?.key&&e.expiry>new Date?(c(g,e.machine.key,{...x,expires:e.expiry}),c(k,e.machine.secret,{...x,expires:e.expiry})):(u(g,x),u(k,x)),S(e.machine||null)}const r=d(new a(null,n||l.URI_PROD,e||f.URI_PROD)),[i,c,u]=y([h,g,k]),[w,b]=p(r.current.socketOnline),[I,j]=p(i[h]||""),[D,z]=p(r.current.account.user||null),[N,S]=p(r.current.account.machine||i[g]&&new s({key:i[g],secret:i[k]})||null),v=w===!(!I&&!N);return m(()=>(r.current.on("open",t),r.current.on("error",t),r.current.on("close",t),r.current.on("account",o),(I||N)&&r.current.setAuth({ghostId:I,machine:N?.toJSON()}),()=>r.current.dispose()),[]),{synchronizer:r.current,ready:v,ghostId:I,online:w,user:D,machine:N}}function e(n){return window.addEventListener("online",n),window.addEventListener("offline",n),()=>{window.removeEventListener("online",n),window.removeEventListener("offline",n)}}function t(){return navigator.onLine}function o(){return!0}function r(){return w(e,t,o)}function i(e,t){const o=d(null),r=d(0),[i,c]=p(null),[s,a]=p({}),{synchronizer:l,ready:w,online:y,user:h,machine:g}=n();return m(()=>{function n(n,o){0!==r.current&&t===o&&e.includes(n)&&a(e=>({...e,[n]:[...u[n].values().filter(n=>n.companyId===t)]}))}function s(e){const{kind:t,companyId:o}=e;n(t,o)}function d(e){const{name:t,body:o}=e;n(f.msgNameToSyncName(t),o.company)}function p(){if(0===r.current){const n=i?.map(n=>n.syncName).filter(n=>!!n);n?.length&&l.desync(t,n),l.off("list",s),l.off("update",s),l.off("delete",s),l.off("message",d)}o.current=null}function m(o){c(o),e.forEach(e=>n(e,t))}if(w&&e?.length&&!isNaN(t))return r.current++,l.on("list",s),l.on("update",s),l.on("delete",s),l.on("message",d),o.current=l.sync(t,e),o.current.then(m,m),o.current.finally(p),()=>{r.current--,o.current||p()}},[t=t??h?.companyId??g?.companyId,e.sort().join(",")]),{ready:w&&y&&!!Object.keys(s).length&&!o.current,replies:i??[],...s}}function c(n,e){const{ready:t,replies:o,[n]:r}=i([n],e);return{ready:t,replies:o,objects:r??[]}}
 /**
  * ReactJS library.
  * {@link https://github.com/trakitwireless/trakit-ts-react|ReactJS controls.}
  * Last updated on Thu June 11 2026 15:43:01
  * @copyright Trak-iT Wireless Inc. 2026
- */import{TrakitSyncCommander as c,TrakitRestfulCommander as u,TrakitSocketCommander as l}from"@trakit/sync";import{useRef as s,useState as f,useEffect as a,useSyncExternalStore as d}from"react";import{storage as m}from"@trakit/objects";const p="0.0.1";export{n as useConnection,r as useIsOnline,i as useSync,p as version};
+ */import{Machine as s,storage as u}from"@trakit/objects";import{TrakitSyncCommander as a,TrakitRestfulCommander as l,TrakitSocketCommander as f}from"@trakit/sync";import{useRef as d,useState as p,useEffect as m,useSyncExternalStore as w}from"react";import{useCookies as y}from"react-cookie";const h="ghostId",g="aK",k="aS",x={path:"/",secure:!0,sameSite:"strict",expires:new Date(0)},b="0.0.3";export{n as useConnection,r as useIsOnline,c as useSingle,i as useSync,b as version};