Update to react 18

dist/index.js

@@ -1,14 +1,30 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
+var __createBinding =
+  (this && this.__createBinding) ||
+  (Object.create
+    ? function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        var desc = Object.getOwnPropertyDescriptor(m, k);
+        if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+          desc = {
+            enumerable: true,
+            get: function () {
+              return m[k];
+            },
+          };
+        }
+        Object.defineProperty(o, k2, desc);
+      }
+    : function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        o[k2] = m[k];
+      });
+var __exportStar =
+  (this && this.__exportStar) ||
+  function (m, exports) {
+    for (var p in m)
+      if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+  };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./nui-events/hooks/useNuiEvent"), exports);
 __exportStar(require("./nui-events/hooks/useNuiCallback"), exports);

dist/nui-events/context/NuiContext.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NuiContext = void 0;
 var react_1 = require("react");
-exports.NuiContext = react_1.createContext(null);
+exports.NuiContext = (0, react_1.createContext)(null);

dist/nui-events/hooks/useNuiCallback.d.ts

@@ -1,12 +1,15 @@
-declare type UseNuiCallbackFetchOptions = {
-    timeout: number | false;
+type UseNuiCallbackFetchOptions = {
+  timeout: number | false;
 };
-declare type UseNuiCallbackFetch<I> = (input?: I, options?: UseNuiCallbackFetchOptions) => void;
-declare type UseNuiCallbackResponse<I, R> = [UseNuiCallbackFetch<I>, {
+type UseNuiCallbackFetch<I> = (input?: I, options?: UseNuiCallbackFetchOptions) => void;
+type UseNuiCallbackResponse<I, R> = [
+  UseNuiCallbackFetch<I>,
+  {
     loading: boolean;
     error: unknown;
     response: R;
-}];
+  },
+];
 /**
  * @callback nuiEventHandler
  * @param {any} responseData
@@ -33,5 +36,10 @@ declare type UseNuiCallbackResponse<I, R> = [UseNuiCallbackFetch<I>, {
  *  fetchUser(11);
  * }, [fetchUser]);
  */
-export declare const useNuiCallback: <I = unknown, R = unknown>(app: string, method: string, handler?: (res: R) => void, errHandler?: (err: unknown) => void) => UseNuiCallbackResponse<I, R>;
+export declare const useNuiCallback: <I = unknown, R = unknown>(
+  app: string,
+  method: string,
+  handler?: (res: R) => void,
+  errHandler?: (err: unknown) => void,
+) => UseNuiCallbackResponse<I, R>;
 export {};

dist/nui-events/hooks/useNuiCallback.js

@@ -32,88 +32,114 @@ var useNuiEvent_1 = require("./useNuiEvent");
  * }, [fetchUser]);
  */
 var useNuiCallback = function (app, method, handler, errHandler) {
-    var _a = react_1.useContext(NuiContext_1.NuiContext), sendAbortable = _a.sendAbortable, callbackTimeout = _a.callbackTimeout;
-    var fetchRef = react_1.useRef();
-    var timeoutRef = react_1.useRef();
-    // These are Refs to avoid re renders.
-    // We dont care if "app" and "method" arguments change.
-    var eventNameRef = react_1.useRef(eventNameFactory_1.eventNameFactory(app, method));
-    var methodNameRef = react_1.useRef(method);
-    var appNameRef = react_1.useRef(app);
-    // has timed out
-    var _b = react_1.useState(false), timedOut = _b[0], setTimedOut = _b[1];
-    // has failed at network or browser level
-    var _c = react_1.useState(false), failed = _c[0], setFailed = _c[1];
-    // is waiting for server callback response event
-    var _d = react_1.useState(false), loading = _d[0], setLoading = _d[1];
-    // returned error from server callback event or network failure
-    var _e = react_1.useState(null), error = _e[0], setError = _e[1];
-    // response from server callback event
-    var _f = react_1.useState(null), response = _f[0], setResponse = _f[1];
-    var onSuccess = react_1.useCallback(function (data) {
-        if (!loading) {
-            return;
-        }
-        // If we receive success event, clear timeout
-        timeoutRef.current && clearTimeout(timeoutRef.current);
-        // If already timed out, don't do shit :)
-        if (timedOut) {
-            return;
-        }
-        // Set new state after success event received
-        setResponse(data);
-        setError(null);
-        setLoading(false);
-        handler === null || handler === void 0 ? void 0 : handler(data);
-    }, [handler, timedOut, loading]);
-    var onError = react_1.useCallback(function (err) {
-        // If we receive error event, clear timeout
-        timeoutRef.current && clearTimeout(timeoutRef.current);
-        // Set new state after error event received
-        setError(err);
-        setResponse(null);
-        setLoading(false);
-        errHandler === null || errHandler === void 0 ? void 0 : errHandler(err);
-    }, [errHandler]);
-    // Handle the success and error events for this method
-    useNuiEvent_1.useNuiEvent(appNameRef.current, methodNameRef.current + "Success", onSuccess);
-    useNuiEvent_1.useNuiEvent(appNameRef.current, methodNameRef.current + "Error", onError);
-    // Only fetch if we are not loading/waiting the events.
-    var fetch = react_1.useCallback(function (data, options) {
-        setLoading(function (curr) {
-            if (!curr) {
-                setTimedOut(false);
-                setFailed(false);
-                setError(null);
-                setResponse(null);
-                fetchRef.current = sendAbortable(methodNameRef.current, data);
-                fetchRef.current.promise.catch(function (e) {
-                    if (!timedOut) {
-                        onError(e);
-                        setFailed(true);
-                        timeoutRef.current = undefined;
-                        fetchRef.current = undefined;
-                    }
-                });
-                var _options = options || { timeout: callbackTimeout };
-                var timeoutTime_1 = _options.timeout === false ? false : _options.timeout || callbackTimeout;
-                if (timeoutTime_1 && !failed) {
-                    clearTimeout(timeoutRef.current);
-                    timeoutRef.current = setTimeout(function () {
-                        setTimedOut(true);
-                        onError(new Error("fivem-nui-react-lib: \"" + eventNameRef.current + "\" event callback timed out after " + timeoutTime_1 + " milliseconds"));
-                        fetchRef.current && fetchRef.current.abort();
-                        timeoutRef.current = undefined;
-                        fetchRef.current = undefined;
-                    }, timeoutTime_1);
-                }
-                return true;
+  var _a = (0, react_1.useContext)(NuiContext_1.NuiContext),
+    sendAbortable = _a.sendAbortable,
+    callbackTimeout = _a.callbackTimeout;
+  var fetchRef = (0, react_1.useRef)();
+  var timeoutRef = (0, react_1.useRef)();
+  // These are Refs to avoid re renders.
+  // We dont care if "app" and "method" arguments change.
+  var eventNameRef = (0, react_1.useRef)((0, eventNameFactory_1.eventNameFactory)(app, method));
+  var methodNameRef = (0, react_1.useRef)(method);
+  var appNameRef = (0, react_1.useRef)(app);
+  // has timed out
+  var _b = (0, react_1.useState)(false),
+    timedOut = _b[0],
+    setTimedOut = _b[1];
+  // has failed at network or browser level
+  var _c = (0, react_1.useState)(false),
+    failed = _c[0],
+    setFailed = _c[1];
+  // is waiting for server callback response event
+  var _d = (0, react_1.useState)(false),
+    loading = _d[0],
+    setLoading = _d[1];
+  // returned error from server callback event or network failure
+  var _e = (0, react_1.useState)(null),
+    error = _e[0],
+    setError = _e[1];
+  // response from server callback event
+  var _f = (0, react_1.useState)(null),
+    response = _f[0],
+    setResponse = _f[1];
+  var onSuccess = (0, react_1.useCallback)(
+    function (data) {
+      if (!loading) {
+        return;
+      }
+      // If we receive success event, clear timeout
+      timeoutRef.current && clearTimeout(timeoutRef.current);
+      // If already timed out, don't do shit :)
+      if (timedOut) {
+        return;
+      }
+      // Set new state after success event received
+      setResponse(data);
+      setError(null);
+      setLoading(false);
+      handler === null || handler === void 0 ? void 0 : handler(data);
+    },
+    [handler, timedOut, loading],
+  );
+  var onError = (0, react_1.useCallback)(
+    function (err) {
+      // If we receive error event, clear timeout
+      timeoutRef.current && clearTimeout(timeoutRef.current);
+      // Set new state after error event received
+      setError(err);
+      setResponse(null);
+      setLoading(false);
+      errHandler === null || errHandler === void 0 ? void 0 : errHandler(err);
+    },
+    [errHandler],
+  );
+  // Handle the success and error events for this method
+  (0, useNuiEvent_1.useNuiEvent)(appNameRef.current, "".concat(methodNameRef.current, "Success"), onSuccess);
+  (0, useNuiEvent_1.useNuiEvent)(appNameRef.current, "".concat(methodNameRef.current, "Error"), onError);
+  // Only fetch if we are not loading/waiting the events.
+  var fetch = (0, react_1.useCallback)(
+    function (data, options) {
+      setLoading(function (curr) {
+        if (!curr) {
+          setTimedOut(false);
+          setFailed(false);
+          setError(null);
+          setResponse(null);
+          fetchRef.current = sendAbortable(methodNameRef.current, data);
+          fetchRef.current.promise.catch(function (e) {
+            if (!timedOut) {
+              onError(e);
+              setFailed(true);
+              timeoutRef.current = undefined;
+              fetchRef.current = undefined;
             }
-            return curr;
-        });
-    }, 
+          });
+          var _options = options || { timeout: callbackTimeout };
+          var timeoutTime_1 = _options.timeout === false ? false : _options.timeout || callbackTimeout;
+          if (timeoutTime_1 && !failed) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = setTimeout(function () {
+              setTimedOut(true);
+              onError(
+                new Error(
+                  'fivem-nui-react-lib: "'
+                    .concat(eventNameRef.current, '" event callback timed out after ')
+                    .concat(timeoutTime_1, " milliseconds"),
+                ),
+              );
+              fetchRef.current && fetchRef.current.abort();
+              timeoutRef.current = undefined;
+              fetchRef.current = undefined;
+            }, timeoutTime_1);
+          }
+          return true;
+        }
+        return curr;
+      });
+    },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
-    return [fetch, { loading: loading, response: response, error: error }];
+    [],
+  );
+  return [fetch, { loading: loading, response: response, error: error }];
 };
 exports.useNuiCallback = useNuiCallback;

dist/nui-events/hooks/useNuiEvent.js

@@ -4,7 +4,7 @@ exports.useNuiEvent = void 0;
 var react_1 = require("react");
 var eventNameFactory_1 = require("../utils/eventNameFactory");
 function addEventListener(element, type, handler) {
-    element.addEventListener(type, handler);
+  element.addEventListener(type, handler);
 }
 /**
  * @callback nuiEventHandler
@@ -28,23 +28,31 @@ function addEventListener(element, type, handler) {
  * useNuiEvent<boolean>("appname", "methodname", setDataState);
  **/
 var useNuiEvent = function (app, method, handler) {
-    var savedHandler = react_1.useRef();
-    // When handler value changes set mutable ref to handler val
-    react_1.useEffect(function () {
-        savedHandler.current = handler;
-    }, [handler]);
-    react_1.useEffect(function () {
-        var eventName = eventNameFactory_1.eventNameFactory(app, method);
-        var eventListener = function (event) {
-            if (savedHandler.current && savedHandler.current.call) {
-                var data = event.data;
-                var newData = data;
-                savedHandler.current(newData);
-            }
-        };
-        addEventListener(window, eventName, eventListener);
-        // Remove Event Listener on component cleanup
-        return function () { return window.removeEventListener(eventName, eventListener); };
-    }, [app, method]);
+  var savedHandler = (0, react_1.useRef)();
+  // When handler value changes set mutable ref to handler val
+  (0, react_1.useEffect)(
+    function () {
+      savedHandler.current = handler;
+    },
+    [handler],
+  );
+  (0, react_1.useEffect)(
+    function () {
+      var eventName = (0, eventNameFactory_1.eventNameFactory)(app, method);
+      var eventListener = function (event) {
+        if (savedHandler.current && savedHandler.current.call) {
+          var data = event.data;
+          var newData = data;
+          savedHandler.current(newData);
+        }
+      };
+      addEventListener(window, eventName, eventListener);
+      // Remove Event Listener on component cleanup
+      return function () {
+        return window.removeEventListener(eventName, eventListener);
+      };
+    },
+    [app, method],
+  );
 };
 exports.useNuiEvent = useNuiEvent;

dist/nui-events/hooks/useNuiRequest.d.ts

@@ -1,6 +1,6 @@
 import { NuiContext } from "../context/NuiContext";
-declare type UseNuiRequestOptions = {
-    resource?: string;
+type UseNuiRequestOptions = {
+  resource?: string;
 };
 /**
  * @typedef {Object} useNuiRequestResponse

dist/nui-events/hooks/useNuiRequest.js

@@ -32,21 +32,32 @@ var NuiContext_1 = require("../context/NuiContext");
  *
  */
 var useNuiRequest = function (_a) {
-    var _b = _a === void 0 ? {} : _a, resource = _b.resource;
-    var context = react_1.useContext(NuiContext_1.NuiContext);
-    if (!context) {
-        throw new Error("fivem-nui-react-lib: useNuiRequest must be used inside NuiProvider passing the `resource` prop");
-    }
-    var send = context.send, sendAbortable = context.sendAbortable;
-    return react_1.useMemo(function () { return ({
+  var _b = _a === void 0 ? {} : _a,
+    resource = _b.resource;
+  var context = (0, react_1.useContext)(NuiContext_1.NuiContext);
+  if (!context) {
+    throw new Error("fivem-nui-react-lib: useNuiRequest must be used inside NuiProvider passing the `resource` prop");
+  }
+  var send = context.send,
+    sendAbortable = context.sendAbortable;
+  return (0, react_1.useMemo)(
+    function () {
+      return {
         send: function (event, data) {
-            if (data === void 0) { data = {}; }
-            return send(event, data, resource);
+          if (data === void 0) {
+            data = {};
+          }
+          return send(event, data, resource);
         },
         sendAbortable: function (event, data) {
-            if (data === void 0) { data = {}; }
-            return sendAbortable(event, data, resource);
+          if (data === void 0) {
+            data = {};
+          }
+          return sendAbortable(event, data, resource);
         },
-    }); }, [send, sendAbortable, resource]);
+      };
+    },
+    [send, sendAbortable, resource],
+  );
 };
 exports.useNuiRequest = useNuiRequest;