@sanity/preview-kit - npm Package Compare versions

Comparing version 0.0.0-dev.1 to 0.0.0-dev.2

dist/index.d.ts

@@ -233,7 +233,2 @@ import type { ClientConfig } from '@sanity/client'
   overlayDrafts?: boolean
-  /**
-   * Throttle the event emits to batch updates.
-   * @defaultValue 300
-   */
-  subscriptionThrottleMs?: number
 }
@@ -261,3 +256,2 @@
   overlayDrafts,
-  subscriptionThrottleMs,
 }: unstable_PreviewConfig<R, Q>): R
@@ -264,0 +258,0 @@

dist/index.js

@@ -1,5 +0,4 @@
-import { useMemo, useState, useEffect, useSyncExternalStore, useReducer, Suspense, useCallback, useDeferredValue, startTransition } from 'react';
+import { useMemo, useState, useEffect, useSyncExternalStore, useReducer, Suspense, useRef, useCallback, startTransition } from 'react';
 import { suspend } from 'suspend-react';
 import { jsx } from 'react/jsx-runtime';
-import { throttle } from 'throttle-debounce';
 const _checkAuth = async (projectId, token) => {
@@ -154,4 +153,3 @@ const headers = token ? {
     tag,
-    overlayDrafts = true,
-    subscriptionThrottleMs = 300
+    overlayDrafts = true
   } = _ref3;
@@ -164,7 +162,18 @@ const [error, setError] = useState();
   const [client, setClient] = useState(null);
-  const [mutations, setMutations] = useState(0);
-  const _refetch = useCallback(() => requestIdleCallback(() => startTransition$1(() => setMutations(prevMutations => prevMutations + 1))), [startTransition$1]);
-  const refetch = useMemo(() => throttle(subscriptionThrottleMs, _refetch), [_refetch, subscriptionThrottleMs]);
-  const debouncedMutations = useDeferredValue(mutations);
+  const [eagerRefetch, setEagerRefetch] = useState(0);
+  const pendingRefetchRef = useRef(0);
+  const scheduleEagerRefetch = useCallback(() => {
+    cancelAnimationFrame(pendingRefetchRef.current);
+    pendingRefetchRef.current = requestAnimationFrame(() => {
+      startTransition$1(() => setEagerRefetch(prevMutations => prevMutations + 1));
+    });
+  }, [startTransition$1]);
+  const [lazyRefetch, setLazyRefetch] = useState(0);
   useEffect(() => {
+    const timeout = setTimeout(() => {
+      setLazyRefetch(eagerRefetch);
+    }, 1e3);
+    return () => clearTimeout(timeout);
+  }, [eagerRefetch]);
+  useEffect(() => {
     if (enabled) {
@@ -217,3 +226,3 @@ let cancelled = false;
       }).subscribe({
-        next: refetch,
+        next: scheduleEagerRefetch,
         error: setError
@@ -225,8 +234,5 @@ });
     }
-  }, [client, params, query, refetch, tag]);
+  }, [client, params, query, scheduleEagerRefetch, tag]);
   if (client) {
-    return suspend(async () => {
-      await new Promise(resolve => setTimeout(resolve, subscriptionThrottleMs));
-      return client.fetch(query, params);
-    }, ["@sanity/preview-kit", "unstable_usePreview", apiHost, apiVersion, dataset, overlayDrafts, projectId, token, useCdn, query, JSON.stringify(params), mutations, debouncedMutations]);
+    return suspend(() => client.fetch(query, params), ["@sanity/preview-kit", "unstable_usePreview", apiHost, apiVersion, dataset, overlayDrafts, projectId, token, useCdn, query, JSON.stringify(params), eagerRefetch, lazyRefetch]);
   }
@@ -233,0 +239,0 @@ return serverSnapshot;

package.json

 {
   "name": "@sanity/preview-kit",
-  "version": "0.0.0-dev.1",
+  "version": "0.0.0-dev.2",
   "description": "General purpose live previews, like next-sanity",
@@ -72,6 +72,4 @@ "keywords": [
     "@types/event-source-polyfill": "^1.0.1",
-    "@types/throttle-debounce": "^5.0.0",
     "event-source-polyfill": "^1.0.31",
-    "suspend-react": "^0.0.9",
-    "throttle-debounce": "^5.0.0"
+    "suspend-react": "^0.0.9"
   },
@@ -78,0 +76,0 @@ "devDependencies": {

src/unstable_usePreview.ts

@@ -8,9 +8,7 @@ /* eslint-disable max-nested-callbacks */
   useCallback,
-  useDeferredValue,
   useEffect,
-  useMemo,
+  useRef,
   useState,
 } from 'react'
 import { suspend } from 'suspend-react'
-import { throttle } from 'throttle-debounce'
 
@@ -37,7 +35,2 @@ import { useParams } from './useParams'
   overlayDrafts?: boolean
-  /**
-   * Throttle the event emits to batch updates.
-   * @defaultValue 300
-   */
-  subscriptionThrottleMs?: number
 }
@@ -62,3 +55,2 @@
   overlayDrafts = true,
-  subscriptionThrottleMs = 300,
 }: unstable_PreviewConfig<R, Q>): R {
@@ -73,18 +65,42 @@ const [error, setError] = useState<Error>()
   const [client, setClient] = useState<SanityClient | null>(null)
-  const [mutations, setMutations] = useState(0)
-  const _refetch = useCallback(
-    () =>
-      requestIdleCallback(() =>
-        startTransition(() =>
-          setMutations((prevMutations) => prevMutations + 1)
-        )
-      ),
-    [startTransition]
-  )
-  const refetch = useMemo(
-    () => throttle(subscriptionThrottleMs, _refetch),
-    [_refetch, subscriptionThrottleMs]
-  )
-  const debouncedMutations = useDeferredValue(mutations)
+  const [eagerRefetch, setEagerRefetch] = useState(0)
+  // Slowest, not so many client fetches but not as "live as you type"
+  // const pendingRefetchRef = useRef(0)
+  // const scheduleEagerRefetch = useCallback(() => {
+  //   cancelIdleCallback(pendingRefetchRef.current)
+  //   pendingRefetchRef.current = requestIdleCallback(
+  //     () => {
+  //       startTransition(() =>
+  //         setEagerRefetch((prevMutations) => prevMutations + 1)
+  //       )
+  //     },
+  //     { timeout: 150 }
+  //   )
+  // }, [startTransition])
+  //
+  // Hopefully the good compromise between the two above and below
+  const pendingRefetchRef = useRef(0)
+  const scheduleEagerRefetch = useCallback(() => {
+    cancelAnimationFrame(pendingRefetchRef.current)
+    pendingRefetchRef.current = requestAnimationFrame(() => {
+      startTransition(() =>
+        setEagerRefetch((prevMutations) => prevMutations + 1)
+      )
+    })
+  }, [startTransition])
+  //
+  // Fastest, but is perhaps over-eager and leads to many client fetches per mutation
+  // const scheduleEagerRefetch = useCallback(() => {
+  //   startTransition(() => setEagerRefetch((prevMutations) => prevMutations + 1))
+  // }, [startTransition])
 
+  // Solves the "states lag 1 update behind" issue that the Studio also have to deal with
+  const [lazyRefetch, setLazyRefetch] = useState(0)
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setLazyRefetch(eagerRefetch)
+    }, 1000)
+    return () => clearTimeout(timeout)
+  }, [eagerRefetch])
+
   useEffect((): any => {
@@ -161,3 +177,3 @@ if (enabled) {
         .subscribe({
-          next: refetch,
+          next: scheduleEagerRefetch,
           error: setError,
@@ -170,25 +186,23 @@ })
     }
-  }, [client, params, query, refetch, tag])
+  }, [client, params, query, scheduleEagerRefetch, tag])
 
   if (client) {
-    return suspend(async () => {
-      await new Promise((resolve) =>
-        setTimeout(resolve, subscriptionThrottleMs)
-      )
-      return client.fetch<R>(query, params)
-    }, [
-      '@sanity/preview-kit',
-      'unstable_usePreview',
-      apiHost,
-      apiVersion,
-      dataset,
-      overlayDrafts,
-      projectId,
-      token,
-      useCdn,
-      query,
-      JSON.stringify(params),
-      mutations,
-      debouncedMutations,
-    ])
+    return suspend(
+      () => client.fetch<R>(query, params),
+      [
+        '@sanity/preview-kit',
+        'unstable_usePreview',
+        apiHost,
+        apiVersion,
+        dataset,
+        overlayDrafts,
+        projectId,
+        token,
+        useCdn,
+        query,
+        JSON.stringify(params),
+        eagerRefetch,
+        lazyRefetch,
+      ]
+    )
   }
@@ -195,0 +209,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

121294

increased by2.15%

Dependency count

6

decreased by-25%

Lines of code

1326

increased by1.45%

Dependency changes

• - Removed@types/throttle-debounce@^5.0.0

• - Removedthrottle-debounce@^5.0.0

• - Removed@types/throttle-debounce@5.0.2(transitive)

• - Removedthrottle-debounce@5.0.2(transitive)