@contember/react-utils - npm Package Compare versions

Comparing version 1.2.0-beta.3 to 1.2.0-rc.0

dist/development/debug-context/Context.js

@@ -42,7 +42,7 @@ import { jsxDEV } from "react/jsx-dev-runtime";
 }
-const useScopedConsoleRef = (prefix) => {
+const useScopedConsoleRef = (prefix, override) => {
   assert("prefix is non-empty string", prefix, isNonEmptyString);
   const parentConsole = parentScopedConsoleOrNone(useContext(ScopedConsoleContext));
   const scopedConsole = useMemo(() => {
-    if (parentConsole) {
+    if (override !== false && (parentConsole || override)) {
       return createPrefixedConsole(prefix, parentConsole);
@@ -52,3 +52,3 @@ } else {
     }
-  }, [parentConsole, prefix]);
+  }, [override, parentConsole, prefix]);
   const ref = useRef(scopedConsole);
@@ -55,0 +55,0 @@ ref.current = scopedConsole;

dist/development/hooks/useAddClassNameDuringResize.js

@@ -27,2 +27,5 @@ import { useRef, useLayoutEffect } from "react";
     }, timeoutToRestore);
+    return () => {
+      clearTimeout(timeoutID.current);
+    };
   });
@@ -29,0 +32,0 @@ useLayoutEffect(addTemporaryClassName, [addTemporaryClassName]);

dist/development/hooks/useExpectSameValueReference.js

@@ -7,6 +7,9 @@ import deepEqual from "deep-equal";
     {
-      console.error("Previous and next next do not match in reference although match in value", {
-        previous: previous.current,
-        next
-      });
+      console.error(
+        "Previous and next values do not match in reference although match in value. Try declaring constants outside of the component scope. Otherwise try to memoize callbacks with useCallback, useReferentiallyStableCallback useEvent, useRef or useMemo.",
+        {
+          previous: previous.current,
+          next
+        }
+      );
     }
@@ -13,0 +16,0 @@ if (shouldThrow) {

dist/development/index.js

@@ -11,4 +11,6 @@ import { createNonNullableContextFactory } from "./context/createNonNullableContextFactory.js";
 import { useConstantValueInvariant } from "./hooks/useConstantValueInvariant.js";
+import { ContainerWidthContext, useContainerWidth } from "./hooks/useContainerWidth.js";
 import { useDebounce } from "./hooks/useDebounce.js";
 import { useDebounceCallback } from "./hooks/useDebounceCallback.js";
+import { useDocumentTitle } from "./hooks/useDocumentTitle.js";
 import { useElementSize } from "./hooks/useElementSize.js";
@@ -36,2 +38,3 @@ import { useEventHandler } from "./hooks/useEventHandler.js";
 export {
+  ContainerWidthContext,
   DebugChildren,
@@ -57,4 +60,6 @@ ScopedConsoleContext,
   useConstantValueInvariant,
+  useContainerWidth,
   useDebounce,
   useDebounceCallback,
+  useDocumentTitle,
   useElementSize,
@@ -61,0 +66,0 @@ useEventHandler,

dist/production/debug-context/Context.js

@@ -42,7 +42,7 @@ import { jsx } from "react/jsx-runtime";
 }
-const useScopedConsoleRef = (prefix) => {
+const useScopedConsoleRef = (prefix, override) => {
   assert("prefix is non-empty string", prefix, isNonEmptyString);
   const parentConsole = parentScopedConsoleOrNone(useContext(ScopedConsoleContext));
   const scopedConsole = useMemo(() => {
-    if (parentConsole) {
+    if (override !== false && (parentConsole || override)) {
       return createPrefixedConsole(prefix, parentConsole);
@@ -52,3 +52,3 @@ } else {
     }
-  }, [parentConsole, prefix]);
+  }, [override, parentConsole, prefix]);
   const ref = useRef(scopedConsole);
@@ -55,0 +55,0 @@ ref.current = scopedConsole;

dist/production/hooks/useAddClassNameDuringResize.js

@@ -27,2 +27,5 @@ import { useRef, useLayoutEffect } from "react";
     }, timeoutToRestore);
+    return () => {
+      clearTimeout(timeoutID.current);
+    };
   });
@@ -29,0 +32,0 @@ useLayoutEffect(addTemporaryClassName, [addTemporaryClassName]);

dist/production/index.js

@@ -11,4 +11,6 @@ import { createNonNullableContextFactory } from "./context/createNonNullableContextFactory.js";
 import { useConstantValueInvariant } from "./hooks/useConstantValueInvariant.js";
+import { ContainerWidthContext, useContainerWidth } from "./hooks/useContainerWidth.js";
 import { useDebounce } from "./hooks/useDebounce.js";
 import { useDebounceCallback } from "./hooks/useDebounceCallback.js";
+import { useDocumentTitle } from "./hooks/useDocumentTitle.js";
 import { useElementSize } from "./hooks/useElementSize.js";
@@ -36,2 +38,3 @@ import { useEventHandler } from "./hooks/useEventHandler.js";
 export {
+  ContainerWidthContext,
   DebugChildren,
@@ -57,4 +60,6 @@ ScopedConsoleContext,
   useConstantValueInvariant,
+  useContainerWidth,
   useDebounce,
   useDebounceCallback,
+  useDocumentTitle,
   useElementSize,
@@ -61,0 +66,0 @@ useEventHandler,

dist/types/debug-context/Context.d.ts

 import { ReactNode } from 'react';
 import { ScopedConsoleContextType } from './Types';
 export declare const ScopedConsoleContext: import("react").Context<ScopedConsoleContextType>;
-export declare const useScopedConsoleRef: (prefix: string) => import("react").MutableRefObject<ScopedConsoleContextType>;
+export declare const useScopedConsoleRef: (prefix: string, override?: boolean) => import("react").MutableRefObject<ScopedConsoleContextType>;
 export type DebugChildrenProps = {
-    active: true;
+    active?: true;
     children: ReactNode;
@@ -8,0 +8,0 @@ id: string;

dist/types/hooks/index.d.ts

@@ -8,4 +8,6 @@ export * from './unwrapRefValue';
 export * from './useConstantValueInvariant';
+export * from './useContainerWidth';
 export * from './useDebounce';
 export * from './useDebounceCallback';
+export * from './useDocumentTitle';
 export * from './useElementSize';
@@ -12,0 +14,0 @@ export * from './useEventHandler';

dist/types/hooks/useExpectSameValueReference.d.ts

@@ -0,2 +1,24 @@
+/**
+ * Checks whether the next value is the same reference as the previous one
+ *
+ * If not, it checks whether the values are deeply equal. If not, it logs an error.
+ *
+ * @param next - Value to be checked.
+ * @param shouldThrow - If true, it throws an error instead of logging it. Defaults to false.
+ * @returns void
+ * -
+ * @example
+ * ```ts
+ * useExpectSameValueReference(style)
+ * ```
+ * @example
+ * ```ts
+ * useExpectSameValueReference(style, true)
+ * ```
+ * @example
+ * ```ts
+ * useExpectSameValueReference(style, import.meta.env.DEV)
+ * ```
+ */
 export declare function useExpectSameValueReference<T>(next: T, shouldThrow?: boolean): void;
 //# sourceMappingURL=useExpectSameValueReference.d.ts.map

package.json

 {
   "name": "@contember/react-utils",
   "license": "Apache-2.0",
-  "version": "1.2.0-beta.3",
+  "version": "1.2.0-rc.0",
   "type": "module",
@@ -33,3 +33,3 @@ "sideEffects": false,
   "dependencies": {
-    "@contember/utilities": "1.2.0-beta.3",
+    "@contember/utilities": "1.2.0-rc.0",
     "deep-equal": "^2.2.0"
@@ -36,0 +36,0 @@ },

src/hooks/index.ts

@@ -8,4 +8,6 @@ export * from './unwrapRefValue'
 export * from './useConstantValueInvariant'
+export * from './useContainerWidth'
 export * from './useDebounce'
 export * from './useDebounceCallback'
+export * from './useDocumentTitle'
 export * from './useElementSize'
@@ -12,0 +14,0 @@ export * from './useEventHandler'

src/hooks/useAddClassNameDuringResize.ts

@@ -54,2 +54,6 @@ import { useLayoutEffect, useRef } from 'react'
 		}, timeoutToRestore)
+
+		return () => {
+			clearTimeout(timeoutID.current)
+		}
 	})
@@ -56,0 +60,0 @@

src/hooks/useExpectSameValueReference.ts

 import deepEqual from 'deep-equal'
 import { useRef } from 'react'
 
-// TODO: Unify error behavior with useConstantValueInvariant() and maybe merge into one hook.
+/**
+ * Checks whether the next value is the same reference as the previous one
+ *
+ * If not, it checks whether the values are deeply equal. If not, it logs an error.
+ *
+ * @param next - Value to be checked.
+ * @param shouldThrow - If true, it throws an error instead of logging it. Defaults to false.
+ * @returns void
+ * -
+ * @example
+ * ```ts
+ * useExpectSameValueReference(style)
+ * ```
+ * @example
+ * ```ts
+ * useExpectSameValueReference(style, true)
+ * ```
+ * @example
+ * ```ts
+ * useExpectSameValueReference(style, import.meta.env.DEV)
+ * ```
+ */
 export function useExpectSameValueReference<T>(next: T, shouldThrow: boolean = false) {
@@ -14,3 +35,7 @@ const previous = useRef(next)
 		if (import.meta.env.DEV) {
-			console.error('Previous and next next do not match in reference although match in value', {
+			console.error(
+				'Previous and next values do not match in reference although match in value. ' +
+				'Try declaring constants outside of the component scope. ' +
+				'Otherwise try to memoize callbacks with useCallback, ' +
+				'useReferentiallyStableCallback useEvent, useRef or useMemo.', {
 				previous: previous.current,
@@ -17,0 +42,0 @@ next,

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

264975

increased by12.48%

Number of package files

286

increased by5.15%

Lines of code

2845

increased by6.63%

Dependency changes

• + Added@contember/utilities@1.2.0-rc.0(transitive)

• + Addedtype-fest@3.13.1(transitive)

• - Removed@contember/utilities@1.2.0-beta.3(transitive)

• Updated@contember/utilities@1.2.0-rc.0