@veltdev/react - npm Package Compare versions

Comparing version 1.0.69 to 1.0.70

cjs/index.js

@@ -97,3 +97,3 @@ 'use strict';
 
-var VELT_SDK_VERSION = '1.0.85';
+var VELT_SDK_VERSION = '1.0.87';
 
@@ -723,2 +723,46 @@ var SnippylyProvider = function (props) {
 }
+/**
+ * @beta This hook is in beta
+ */
+function useLiveState(liveStateDataId, initialValue, debounceTime) {
+    if (debounceTime === void 0) { debounceTime = 50; }
+    var liveStateSyncElement = useLiveStateSyncUtils();
+    var _a = React__default["default"].useState(initialValue), data = _a[0], setData = _a[1];
+    React.useEffect(function () {
+        if (!(liveStateSyncElement === null || liveStateSyncElement === void 0 ? void 0 : liveStateSyncElement.getLiveStateData))
+            return;
+        var subscription = liveStateSyncElement.getLiveStateData(liveStateDataId).subscribe(function (res) {
+            setData(res);
+        });
+        return function () {
+            subscription.unsubscribe();
+        };
+    }, [liveStateSyncElement === null || liveStateSyncElement === void 0 ? void 0 : liveStateSyncElement.getLiveStateData]);
+    var useDebounce = function (callback) {
+        var callbackRef = React.useRef(callback);
+        var timerRef = React.useRef(null);
+        React.useEffect(function () {
+            callbackRef.current = callback;
+        });
+        var debounce = function (value, delay) {
+            if (timerRef.current) {
+                clearTimeout(timerRef.current);
+            }
+            timerRef.current = setTimeout(function () {
+                callbackRef.current(value);
+            }, delay);
+        };
+        return debounce;
+    };
+    var setDataFunction = function (value) {
+        setData(value);
+        debouncedOnInput(value, debounceTime); // default 50ms debounce time
+    };
+    var debouncedOnInput = useDebounce(function (value) {
+        if (liveStateSyncElement === null || liveStateSyncElement === void 0 ? void 0 : liveStateSyncElement.setLiveStateData) {
+            liveStateSyncElement.setLiveStateData(liveStateDataId, value);
+        }
+    });
+    return [data, setDataFunction];
+}
 
@@ -892,2 +936,3 @@ /**
 exports.useLiveSelectionUtils = useLiveSelectionUtils;
+exports.useLiveState = useLiveState;
 exports.useLiveStateData = useLiveStateData;
@@ -894,0 +939,0 @@ exports.useLiveStateSyncUtils = useLiveStateSyncUtils;

cjs/types/constants.d.ts

@@ -1,1 +0,1 @@
-export declare const VELT_SDK_VERSION = "1.0.85";
+export declare const VELT_SDK_VERSION = "1.0.87";

cjs/types/hooks/index.d.ts

@@ -5,3 +5,3 @@ export { useAddLocation, useSetLocation, useSetDocumentId, useIdentify, useClient, } from './Client';
 export { useHuddleUtils, } from './HuddleElement';
-export { useLiveStateSyncUtils, useLiveStateData, useSetLiveStateData, useUserEditorState, useEditor, useEditorAccessRequestHandler, } from './LiveStateSyncElement';
+export { useLiveStateSyncUtils, useLiveStateData, useSetLiveStateData, useUserEditorState, useEditor, useEditorAccessRequestHandler, useLiveState, } from './LiveStateSyncElement';
 export { usePresenceUtils, usePresenceUsers, } from './PresenceElement';
@@ -8,0 +8,0 @@ export { useRecorderUtils, useRecorderAddHandler, } from './RecorderElement';

cjs/types/hooks/LiveStateSyncElement.d.ts

@@ -29,1 +29,5 @@ import { LiveStateSyncElement, User, UserEditorAccess } from "@veltdev/types";
 } | null;
+/**
+ * @beta This hook is in beta
+ */
+export declare function useLiveState<T>(liveStateDataId: string, initialValue?: any, debounceTime?: number): [T, (value: T) => void];

esm/index.js

@@ -89,3 +89,3 @@ import React, { createContext, useContext, useState, useEffect, useRef } from 'react';
 
-var VELT_SDK_VERSION = '1.0.85';
+var VELT_SDK_VERSION = '1.0.87';
 
@@ -715,2 +715,46 @@ var SnippylyProvider = function (props) {
 }
+/**
+ * @beta This hook is in beta
+ */
+function useLiveState(liveStateDataId, initialValue, debounceTime) {
+    if (debounceTime === void 0) { debounceTime = 50; }
+    var liveStateSyncElement = useLiveStateSyncUtils();
+    var _a = React.useState(initialValue), data = _a[0], setData = _a[1];
+    useEffect(function () {
+        if (!(liveStateSyncElement === null || liveStateSyncElement === void 0 ? void 0 : liveStateSyncElement.getLiveStateData))
+            return;
+        var subscription = liveStateSyncElement.getLiveStateData(liveStateDataId).subscribe(function (res) {
+            setData(res);
+        });
+        return function () {
+            subscription.unsubscribe();
+        };
+    }, [liveStateSyncElement === null || liveStateSyncElement === void 0 ? void 0 : liveStateSyncElement.getLiveStateData]);
+    var useDebounce = function (callback) {
+        var callbackRef = useRef(callback);
+        var timerRef = useRef(null);
+        useEffect(function () {
+            callbackRef.current = callback;
+        });
+        var debounce = function (value, delay) {
+            if (timerRef.current) {
+                clearTimeout(timerRef.current);
+            }
+            timerRef.current = setTimeout(function () {
+                callbackRef.current(value);
+            }, delay);
+        };
+        return debounce;
+    };
+    var setDataFunction = function (value) {
+        setData(value);
+        debouncedOnInput(value, debounceTime); // default 50ms debounce time
+    };
+    var debouncedOnInput = useDebounce(function (value) {
+        if (liveStateSyncElement === null || liveStateSyncElement === void 0 ? void 0 : liveStateSyncElement.setLiveStateData) {
+            liveStateSyncElement.setLiveStateData(liveStateDataId, value);
+        }
+    });
+    return [data, setDataFunction];
+}
 
@@ -846,3 +890,3 @@ /**
 
-export { SnippylyArrowTool as VeltArrowTool, SnippylyArrows as VeltArrows, SnippylyCommentBubble as VeltCommentBubble, VeltCommentPlayerTimeline, SnippylyCommentTool as VeltCommentTool, SnippylyComments as VeltComments, SnippylyCommentsSidebar as VeltCommentsSidebar, SnippylyCursor as VeltCursor, SnippylyHuddle as VeltHuddle, SnippylyHuddleTool as VeltHuddleTool, SnippylyPresence as VeltPresence, SnippylyProvider as VeltProvider, SnippylyRecorderControlPanel as VeltRecorderControlPanel, SnippylyRecorderNotes as VeltRecorderNotes, SnippylyRecorderPlayer as VeltRecorderPlayer, SnippylyRecorderTool as VeltRecorderTool, SnippylySidebarButton as VeltSidebarButton, SnippylyTagTool as VeltTagTool, SnippylyTags as VeltTags, SnippylyUserInviteTool as VeltUserInviteTool, SnippylyUserRequestTool as VeltUserRequestTool, VeltVideoPlayer, useAIRewriterUtils, useAddLocation, useClient, useCommentAddHandler, useCommentAnnotations, useCommentDialogSidebarClickHandler, useCommentModeState, useCommentUpdateHandler, useCommentUtils, useCursorUsers, useCursorUtils, useEditor, useEditorAccessRequestHandler, useHuddleUtils, useIdentify, useLiveSelectionUtils, useLiveStateData, useLiveStateSyncUtils, usePresenceUsers, usePresenceUtils, useRecorderAddHandler, useRecorderUtils, useSetDocumentId, useSetLiveStateData, useSetLocation, useTagAnnotations, useTagUtils, useUserEditorState, useVeltClient };
+export { SnippylyArrowTool as VeltArrowTool, SnippylyArrows as VeltArrows, SnippylyCommentBubble as VeltCommentBubble, VeltCommentPlayerTimeline, SnippylyCommentTool as VeltCommentTool, SnippylyComments as VeltComments, SnippylyCommentsSidebar as VeltCommentsSidebar, SnippylyCursor as VeltCursor, SnippylyHuddle as VeltHuddle, SnippylyHuddleTool as VeltHuddleTool, SnippylyPresence as VeltPresence, SnippylyProvider as VeltProvider, SnippylyRecorderControlPanel as VeltRecorderControlPanel, SnippylyRecorderNotes as VeltRecorderNotes, SnippylyRecorderPlayer as VeltRecorderPlayer, SnippylyRecorderTool as VeltRecorderTool, SnippylySidebarButton as VeltSidebarButton, SnippylyTagTool as VeltTagTool, SnippylyTags as VeltTags, SnippylyUserInviteTool as VeltUserInviteTool, SnippylyUserRequestTool as VeltUserRequestTool, VeltVideoPlayer, useAIRewriterUtils, useAddLocation, useClient, useCommentAddHandler, useCommentAnnotations, useCommentDialogSidebarClickHandler, useCommentModeState, useCommentUpdateHandler, useCommentUtils, useCursorUsers, useCursorUtils, useEditor, useEditorAccessRequestHandler, useHuddleUtils, useIdentify, useLiveSelectionUtils, useLiveState, useLiveStateData, useLiveStateSyncUtils, usePresenceUsers, usePresenceUtils, useRecorderAddHandler, useRecorderUtils, useSetDocumentId, useSetLiveStateData, useSetLocation, useTagAnnotations, useTagUtils, useUserEditorState, useVeltClient };
 //# sourceMappingURL=index.js.map

esm/types/constants.d.ts

@@ -1,1 +0,1 @@
-export declare const VELT_SDK_VERSION = "1.0.85";
+export declare const VELT_SDK_VERSION = "1.0.87";

esm/types/hooks/index.d.ts

@@ -5,3 +5,3 @@ export { useAddLocation, useSetLocation, useSetDocumentId, useIdentify, useClient, } from './Client';
 export { useHuddleUtils, } from './HuddleElement';
-export { useLiveStateSyncUtils, useLiveStateData, useSetLiveStateData, useUserEditorState, useEditor, useEditorAccessRequestHandler, } from './LiveStateSyncElement';
+export { useLiveStateSyncUtils, useLiveStateData, useSetLiveStateData, useUserEditorState, useEditor, useEditorAccessRequestHandler, useLiveState, } from './LiveStateSyncElement';
 export { usePresenceUtils, usePresenceUsers, } from './PresenceElement';
@@ -8,0 +8,0 @@ export { useRecorderUtils, useRecorderAddHandler, } from './RecorderElement';

esm/types/hooks/LiveStateSyncElement.d.ts

@@ -29,1 +29,5 @@ import { LiveStateSyncElement, User, UserEditorAccess } from "@veltdev/types";
 } | null;
+/**
+ * @beta This hook is in beta
+ */
+export declare function useLiveState<T>(liveStateDataId: string, initialValue?: any, debounceTime?: number): [T, (value: T) => void];

index.d.ts

@@ -384,2 +384,6 @@ /// <reference types="react" />
 } | null;
+/**
+ * @beta This hook is in beta
+ */
+declare function useLiveState<T>(liveStateDataId: string, initialValue?: any, debounceTime?: number): [T, (value: T) => void];
 
@@ -423,2 +427,2 @@ /**
 
-export { SnippylyArrowTool as VeltArrowTool, SnippylyArrows as VeltArrows, SnippylyCommentBubble as VeltCommentBubble, VeltCommentPlayerTimeline, SnippylyCommentTool as VeltCommentTool, SnippylyComments as VeltComments, SnippylyCommentsSidebar as VeltCommentsSidebar, SnippylyCursor as VeltCursor, SnippylyHuddle as VeltHuddle, SnippylyHuddleTool as VeltHuddleTool, SnippylyPresence as VeltPresence, SnippylyProvider as VeltProvider, SnippylyRecorderControlPanel as VeltRecorderControlPanel, SnippylyRecorderNotes as VeltRecorderNotes, SnippylyRecorderPlayer as VeltRecorderPlayer, SnippylyRecorderTool as VeltRecorderTool, SnippylySidebarButton as VeltSidebarButton, SnippylyTagTool as VeltTagTool, SnippylyTags as VeltTags, SnippylyUserInviteTool as VeltUserInviteTool, SnippylyUserRequestTool as VeltUserRequestTool, VeltVideoPlayer, useAIRewriterUtils, useAddLocation, useClient, useCommentAddHandler, useCommentAnnotations, useCommentDialogSidebarClickHandler, useCommentModeState, useCommentUpdateHandler, useCommentUtils, useCursorUsers, useCursorUtils, useEditor, useEditorAccessRequestHandler, useHuddleUtils, useIdentify, useLiveSelectionUtils, useLiveStateData, useLiveStateSyncUtils, usePresenceUsers, usePresenceUtils, useRecorderAddHandler, useRecorderUtils, useSetDocumentId, useSetLiveStateData, useSetLocation, useTagAnnotations, useTagUtils, useUserEditorState, useVeltClient };
+export { SnippylyArrowTool as VeltArrowTool, SnippylyArrows as VeltArrows, SnippylyCommentBubble as VeltCommentBubble, VeltCommentPlayerTimeline, SnippylyCommentTool as VeltCommentTool, SnippylyComments as VeltComments, SnippylyCommentsSidebar as VeltCommentsSidebar, SnippylyCursor as VeltCursor, SnippylyHuddle as VeltHuddle, SnippylyHuddleTool as VeltHuddleTool, SnippylyPresence as VeltPresence, SnippylyProvider as VeltProvider, SnippylyRecorderControlPanel as VeltRecorderControlPanel, SnippylyRecorderNotes as VeltRecorderNotes, SnippylyRecorderPlayer as VeltRecorderPlayer, SnippylyRecorderTool as VeltRecorderTool, SnippylySidebarButton as VeltSidebarButton, SnippylyTagTool as VeltTagTool, SnippylyTags as VeltTags, SnippylyUserInviteTool as VeltUserInviteTool, SnippylyUserRequestTool as VeltUserRequestTool, VeltVideoPlayer, useAIRewriterUtils, useAddLocation, useClient, useCommentAddHandler, useCommentAnnotations, useCommentDialogSidebarClickHandler, useCommentModeState, useCommentUpdateHandler, useCommentUtils, useCursorUsers, useCursorUtils, useEditor, useEditorAccessRequestHandler, useHuddleUtils, useIdentify, useLiveSelectionUtils, useLiveState, useLiveStateData, useLiveStateSyncUtils, usePresenceUsers, usePresenceUtils, useRecorderAddHandler, useRecorderUtils, useSetDocumentId, useSetLiveStateData, useSetLocation, useTagAnnotations, useTagUtils, useUserEditorState, useVeltClient };

package.json

 {
     "name": "@veltdev/react",
-    "version": "1.0.69",
+    "version": "1.0.70",
     "description": "",
@@ -5,0 +5,0 @@ "scripts": {

No alert changes

Improved metrics

Total package byte prevSize

361299

3.33%

Lines of code

3241

3.22%

No dependency changes