Merge pull request #117 from christopher-buss/feature/add-useful-hooks

feat(ui): add more useful hooks

Author: christopher-buss

eslint.config.ts

@@ -1,4 +1,4 @@
-import style, { GLOB_JS, GLOB_TSX } from "@isentinel/eslint-config";
+import style, { GLOB_TS } from "@isentinel/eslint-config";
 
 export default style(
 	{
@@ -19,6 +19,18 @@ export default style(
 					type: "natural",
 				},
 			],
+		},
+		typescript: {
+			parserOptions: {
+				project: "tsconfig.build.json",
+			},
+			tsconfigPath: "tsconfig.build.json",
+		},
+	},
+	{
+		files: [GLOB_TS],
+		rules: {
+			"no-param-reassign": "error",
 			"ts/no-magic-numbers": [
 				"error",
 				{
@@ -29,20 +41,11 @@ export default style(
 				},
 			],
 		},
-		typescript: {
-			parserOptions: {
-				project: "tsconfig.build.json",
-			},
-			tsconfigPath: "tsconfig.build.json",
-		},
-	},
-	{
-		ignores: [GLOB_JS],
 	},
 	{
-		files: [GLOB_TSX],
+		files: ["src/client/ui/hooks/**/*"],
 		rules: {
-			"ts/no-magic-numbers": "off",
+			"max-lines-per-function": "off",
 		},
 	},
 );

src/client/ui/hooks/debugging/use-render-info.ts

@@ -0,0 +1,53 @@
+import { TableToString } from "@rbxts/rbx-debug";
+import { useEffect, useRef } from "@rbxts/react";
+
+interface RenderInfo {
+	name: string;
+	renders: number;
+	sinceLastRender: number;
+	timestamp: number;
+}
+
+/**
+ * If you want to monitor and log how a component renders, you can use the
+ * `useRenderInfo` hook. This hook records the render count, the time difference
+ * between renders, and the current render timestamp. This hook is especially
+ * useful for development purposes, as it helps developers understand how a
+ * component behaves in terms of rendering, and allows them to improve
+ * performance and detect potential problems.
+ *
+ * @param name - The name of the component you are monitoring.
+ * @param logFunction - The function to use for logging. Defaults to `print`.
+ * @param logEnabled - Whether or not logging is enabled.
+ * @returns The render information.
+ * @see https://github.com/cool-organization/rbx-hooks/blob/main/src/debugging/use-render-info.ts
+ */
+export function useRenderInfo(
+	name = "Unknown",
+	logFunction = print,
+	logEnabled = true,
+): Readonly<RenderInfo> {
+	const count = useRef(0);
+	const lastRender = useRef<number>();
+	const currentTime = os.clock();
+
+	count.current += 1;
+
+	useEffect(() => {
+		lastRender.current = os.clock();
+	});
+
+	const sinceLastRender = lastRender.current !== undefined ? currentTime - lastRender.current : 0;
+	const info = {
+		name,
+		renders: count.current,
+		sinceLastRender,
+		timestamp: currentTime,
+	};
+
+	if (logEnabled) {
+		logFunction(TableToString(info, true));
+	}
+
+	return table.freeze(info);
+}

src/client/ui/hooks/debugging/use-render-spy.ts

@@ -0,0 +1,16 @@
+import { useEffect, useRef } from "@rbxts/react";
+
+/**
+ * A simple function that checks how many times the component has been rendered.
+ *
+ * @returns The render count.
+ * @see https://github.com/cool-organization/rbx-hooks/blob/main/src/debugging/use-renders-spy.ts
+ */
+export function useRendersSpy(): number {
+	const count = useRef(0);
+	useEffect(() => {
+		count.current += 1;
+	});
+
+	return count.current;
+}

src/client/ui/hooks/debugging/use-why-did-you-update.ts

@@ -0,0 +1,64 @@
+import Object from "@rbxts/object-utils";
+import { TableToString } from "@rbxts/rbx-debug";
+import { useEffect, useRef } from "@rbxts/react";
+import { t } from "@rbxts/t";
+
+interface ChangeObject {
+	from: unknown;
+	to: unknown;
+}
+
+/**
+ * A simple hook that checks which prop caused the component to re-render.
+ *
+ * @param name - The name of the component.
+ * @param props - The props of the component.
+ * @param logFunction - The function to use to log the changes.
+ * @param logEnabled - Whether or not to log the changes.
+ * @see https://github.com/cool-organization/rbx-hooks/blob/main/src/debugging/use-why-did-you-update.ts
+ */
+export function useWhyDidYouUpdate(
+	name: string,
+	props: Record<string, unknown>,
+	logFunction = print,
+	logEnabled = true,
+): void {
+	const previousProps = useRef<Record<string, unknown>>({});
+
+	useEffect(() => {
+		const previous = previousProps.current;
+
+		const allKeys = Object.keys({ ...previous, ...props });
+		const changesObject: Record<string, ChangeObject> = {};
+
+		for (const key of allKeys) {
+			let previousValue = previous[key];
+			let updatedValue = props[key];
+
+			if (previousValue !== updatedValue) {
+				// We need to remove the meta tables from the previous and new
+				// values to ensure we don't call any meta-methods on the props.
+				if (t.table(previousValue)) {
+					// eslint-disable-next-line ts/no-non-null-assertion -- Required to remove meta table
+					previousValue = setmetatable(table.clone(previousValue), undefined!);
+				}
+
+				if (t.table(updatedValue)) {
+					// eslint-disable-next-line ts/no-non-null-assertion -- Required to remove meta table
+					updatedValue = setmetatable(table.clone(updatedValue), undefined!);
+				}
+
+				changesObject[key] = {
+					from: previousValue,
+					to: updatedValue,
+				};
+			}
+		}
+
+		if (logEnabled && next(changesObject)[0]) {
+			logFunction(name + " " + TableToString(changesObject, true));
+		}
+
+		previousProps.current = props;
+	});
+}

src/client/ui/hooks/index.ts

@@ -1,5 +1,6 @@
 export * from "./use-defined";
 export * from "./use-motion";
+export * from "./use-orientation";
 export * from "./use-premium";
 export * from "./use-rem";
 export * from "./use-selector";

src/client/ui/hooks/use-orientation.ts

@@ -0,0 +1,18 @@
+import { useViewport } from "@rbxts/pretty-react-hooks";
+import { useState } from "@rbxts/react";
+
+type Orientation = "landscape" | "portrait";
+
+export function useOrientation(): Orientation {
+	const viewportBinding = useViewport(viewport => {
+		setOrientation(viewport.Y > viewport.X ? "portrait" : "landscape");
+	});
+
+	const [orientation, setOrientation] = useState<Orientation>(
+		viewportBinding
+			.map(viewport => (viewport.Y > viewport.X ? "portrait" : "landscape"))
+			.getValue(),
+	);
+
+	return orientation;
+}