@elyx-code/editor-ui 0.0.2

package/src/utils/react.tsx

@@ -0,0 +1,679 @@
+import { Events, Logger } from '@elyx-code/common-ts-utils';
+import React, {
+	useEffect,
+	useRef,
+	MutableRefObject,
+	RefCallback,
+	useState,
+	useLayoutEffect,
+	Component,
+	ErrorInfo,
+	createElement,
+	FC,
+	ComponentType,
+	ReactNode,
+	useMemo,
+} from 'react';
+import ReactDOM, { Container } from 'react-dom';
+import { createRoot as _createRoot, Root, RootOptions } from 'react-dom/client';
+import { useLocation } from 'react-router-dom';
+
+export interface IComponentLifecycleProps {
+	onMount?: (htmlElement: HTMLElement) => void;
+	onUpdate?: (htmlElement: HTMLElement) => void;
+	onBeforeUpdate?: () => void;
+	onUnmount?: () => void;
+}
+
+export function safeRootRerender(
+	root: ReactRoot,
+	container: Container,
+	children: ReactNode,
+	options: {
+		debug?: boolean;
+	} = {}
+): ReactRoot {
+	try {
+		if (options.debug) {
+			debugger;
+		}
+		root.root.render(children);
+
+		return root;
+	} catch (e) {
+		Logger.error('Error rendering root', e);
+		if (options.debug) {
+			debugger;
+		}
+		const newRoot = createRoot(root.containerElementSelector);
+		newRoot.primitiveRender(children);
+
+		if (options.debug) {
+			debugger;
+		}
+
+		return newRoot;
+	}
+}
+
+export function safeRootUnmount(root: Root, container: Container): void {
+	if (root && container && document.body.contains(container)) {
+		try {
+			root.unmount();
+		} catch (e) {
+			Logger.error('Error unmounting root', e);
+		}
+	}
+}
+
+export class ReactRoot extends Events {
+	root: Root;
+	container: Container;
+	containerElementSelector: string;
+	rendering: boolean = false;
+	unmounting: boolean = false;
+	mounted: boolean = false;
+
+	element: HTMLElement | null = null;
+
+	constructor(containerElementSelector: string, options?: RootOptions) {
+		super();
+		this.containerElementSelector = containerElementSelector;
+	}
+
+	// Accesses the first child of the container and returns the target
+	get ref(): HTMLElement | null {
+		return (this.container?.firstChild as HTMLElement) || null;
+	}
+
+	setupRoot() {
+		if (!this.root) {
+			this.container = document.querySelector(this.containerElementSelector);
+			this.root = _createRoot(this.container);
+		} else if (!this.ref || !document.contains(this.ref)) {
+			this.container = document.querySelector(this.containerElementSelector);
+			this.root = _createRoot(this.container);
+		}
+	}
+
+	// These are the *emitters*
+	onMount(element: HTMLElement) {
+		this.element = element;
+		this.rendering = false;
+		this.mounted = true;
+		this.emit('mount', element);
+	}
+
+	onUpdate(element: HTMLElement) {
+		this.element = element;
+		this.rendering = false;
+		this.emit('update', element);
+	}
+
+	onUnmount() {
+		this.element = null;
+		this.mounted = false;
+		this.rendering = false;
+		this.unmounting = false;
+		this.emit('unmount');
+	}
+
+	onBeforeUpdate() {
+		this.rendering = true;
+		this.emit('before-update');
+	}
+
+	// Adds the lifecycle methods from thi class as props
+	// to be passed to the rendered children elements
+	// While respecting any props with the same name that might have been passed by the user
+	mergeProps<
+		Props = {
+			[key: string]: any;
+		}
+	>(props: Props = {} as Props) {
+		const lifecycleProps: IComponentLifecycleProps & Props = {
+			...props,
+		};
+
+		if (
+			// @ts-ignore
+			props.onMount &&
+			// @ts-ignore
+			typeof props.onMount === 'function'
+		) {
+			lifecycleProps.onMount = (..._args) => {
+				// @ts-ignore
+				props.onMount?.(..._args);
+				this.onMount(_args[0]);
+			};
+		} else {
+			lifecycleProps.onMount = (elem) => {
+				this.onMount(elem);
+			};
+		}
+
+		if (
+			// @ts-ignore
+			props.onUpdate &&
+			// @ts-ignore
+			typeof props.onUpdate === 'function'
+		) {
+			lifecycleProps.onUpdate = (..._args) => {
+				// @ts-ignore
+				props.onUpdate?.(..._args);
+				this.onUpdate(_args[0]);
+			};
+		} else {
+			lifecycleProps.onUpdate = (elem) => {
+				this.onUpdate(elem);
+			};
+		}
+
+		if (
+			// @ts-ignore
+			props.onUnmount &&
+			// @ts-ignore
+			typeof props.onUnmount === 'function'
+		) {
+			lifecycleProps.onUnmount = (..._args) => {
+				// @ts-ignore
+				props.onUnmount?.(..._args);
+				this.onUnmount();
+			};
+		} else {
+			lifecycleProps.onUnmount = () => {
+				this.onUnmount();
+			};
+		}
+
+		if (
+			// @ts-ignore
+			props.onBeforeUpdate &&
+			// @ts-ignore
+			typeof props.onBeforeUpdate === 'function'
+		) {
+			lifecycleProps.onBeforeUpdate = (..._args) => {
+				// @ts-ignore
+				props.onBeforeUpdate?.(..._args);
+				this.onBeforeUpdate();
+			};
+		} else {
+			lifecycleProps.onBeforeUpdate = () => {
+				this.onBeforeUpdate();
+			};
+		}
+
+		return lifecycleProps;
+	}
+
+	primitiveRender(children: ReactNode): ReactRoot {
+		this.setupRoot();
+		this.root.render(children);
+
+		return this;
+	}
+
+	renderRaw(children: ReactNode): ReactRoot {
+		this.setupRoot();
+		return safeRootRerender(this, this.container, children);
+	}
+
+	render<
+		Props = {
+			[key: string]: any;
+		}
+	>(
+		MainChild: string | number | boolean | FC<any> | ComponentType<any>,
+		props: Props = {} as Props,
+		nestedChildren?: ReactNode,
+		options: {
+			debug?: boolean;
+			onError?: (error: Error) => void;
+		} = {}
+	): Promise<ReactRoot> {
+		if (this.mounted) {
+			if (options.debug) {
+				debugger;
+			}
+
+			if (this.rendering) {
+				if (options.debug) {
+					debugger;
+				}
+				return new Promise((resolve) => {
+					// Use a named handler to be able to remove it
+					const handleUpdate = async () => {
+						this.off('update', handleUpdate); // <-- CLEANUP
+						if (options.debug) {
+							debugger;
+						}
+
+						if (this.rendering) {
+							// Recurse, in case another render started
+							await this.render(MainChild, props, nestedChildren, options);
+						}
+
+						resolve(this);
+					};
+					this.on('update', handleUpdate);
+				});
+			} else {
+				if (options.debug) {
+					debugger;
+				}
+
+				return new Promise((resolve) => {
+					// Use a named handler to be able to remove it
+					const handleUpdate = () => {
+						this.off('update', handleUpdate); // <-- CLEANUP
+						if (options.debug) {
+							debugger;
+						}
+
+						resolve(this);
+					};
+					this.on('update', handleUpdate);
+
+					let sanitizedChildren: ReactNode;
+
+					// If the children is a constructor, render it
+					if (typeof MainChild == 'function') {
+						if (options.debug) {
+							debugger;
+						}
+						const sanitizedProps = this.mergeProps<Props>(props);
+
+						if (nestedChildren) {
+							sanitizedChildren = createElement(
+								MainChild,
+								sanitizedProps,
+								nestedChildren
+							);
+
+							if (options.debug) {
+								debugger;
+							}
+						} else {
+							if (options.debug) {
+								debugger;
+							}
+
+							sanitizedChildren = createElement(MainChild, sanitizedProps);
+
+							if (options.debug) {
+								debugger;
+							}
+						}
+					} else if (typeof MainChild == 'object' && MainChild !== null) {
+						if (options.debug) {
+							debugger;
+						}
+
+						const sanitizedProps = this.mergeProps<Props>(props);
+
+						if (nestedChildren) {
+							if (options.debug) {
+								debugger;
+							}
+
+							sanitizedChildren = createElement(
+								MainChild,
+								sanitizedProps,
+								nestedChildren
+							);
+						} else {
+							sanitizedChildren = createElement(MainChild, sanitizedProps);
+						}
+					} else {
+						if (options.debug) {
+							debugger;
+						}
+
+						sanitizedChildren = MainChild;
+					}
+
+					this.rendering = true;
+
+					if (options.debug) {
+						debugger;
+					}
+
+					this.setupRoot();
+
+					if (options.debug) {
+						debugger;
+					}
+
+					const sanitizedProps = this.mergeProps<any>({
+						onError: (error: Error, errorInfo: ErrorInfo) => {
+							if (options.onError) {
+								options.onError(error);
+							}
+						},
+					});
+
+					if (options.onError) {
+						sanitizedChildren = createElement(
+							ErrorBoundary,
+							sanitizedProps as any,
+							sanitizedChildren
+						);
+					}
+
+					const newRoot = safeRootRerender(
+						this,
+						this.container,
+						sanitizedChildren,
+						options
+					);
+					this.root = newRoot.root;
+
+					return this;
+				});
+			}
+		} else if (this.rendering) {
+			if (options.debug) {
+				debugger;
+			}
+			return new Promise((resolve) => {
+				// Use a named handler to be able to remove it
+				const handleUpdate = async () => {
+					this.off('update', handleUpdate); // <-- CLEANUP
+					if (options.debug) {
+						debugger;
+					}
+
+					if (this.rendering) {
+						await this.render(MainChild, props, nestedChildren, options);
+					}
+
+					resolve(this);
+				};
+				this.on('update', handleUpdate);
+			});
+		} else {
+			if (options.debug) {
+				debugger;
+			}
+			return new Promise((resolve) => {
+				// Use a named handler to be able to remove it
+				const handleMount = () => {
+					this.off('mount', handleMount); // <-- CLEANUP
+					if (options.debug) {
+						debugger;
+					}
+					resolve(this);
+				};
+				this.on('mount', handleMount);
+
+				let sanitizedChildren: ReactNode;
+
+				// If the children is a constructor, render it
+				if (typeof MainChild == 'function') {
+					if (options.debug) {
+						debugger;
+					}
+
+					const sanitizedProps = this.mergeProps<Props>(props);
+
+					if (nestedChildren) {
+						sanitizedChildren = createElement(
+							MainChild,
+							sanitizedProps,
+							nestedChildren
+						);
+
+						if (options.debug) {
+							debugger;
+						}
+					} else {
+						if (options.debug) {
+							debugger;
+						}
+
+						sanitizedChildren = createElement(MainChild, sanitizedProps);
+
+						if (options.debug) {
+							debugger;
+						}
+					}
+				} else if (typeof MainChild == 'object' && MainChild !== null) {
+					if (options.debug) {
+						debugger;
+					}
+					const sanitizedProps = this.mergeProps<Props>(props);
+
+					if (nestedChildren) {
+						if (options.debug) {
+							debugger;
+						}
+
+						sanitizedChildren = createElement(
+							MainChild,
+							sanitizedProps,
+							nestedChildren
+						);
+					} else {
+						sanitizedChildren = createElement(MainChild, sanitizedProps);
+					}
+				} else {
+					if (options.debug) {
+						debugger;
+					}
+
+					sanitizedChildren = MainChild;
+				}
+
+				this.rendering = true;
+
+				if (options.debug) {
+					debugger;
+				}
+
+				this.setupRoot();
+
+				if (options.debug) {
+					debugger;
+				}
+
+				const sanitizedProps = this.mergeProps<any>({
+					onError: (error: Error, errorInfo: ErrorInfo) => {
+						if (options.onError) {
+							options.onError(error);
+						}
+					},
+				});
+
+				if (options.onError) {
+					sanitizedChildren = createElement(
+						ErrorBoundary,
+						sanitizedProps as any,
+						sanitizedChildren
+					);
+				}
+
+				const newRoot = safeRootRerender(
+					this,
+					this.container,
+					sanitizedChildren,
+					options
+				);
+				this.root = newRoot.root;
+
+				return this;
+			});
+		}
+	}
+
+	unmount(): Promise<void> {
+		return new Promise((resolve) => {
+			this.unmounting = true;
+
+			// Named handler to resolve promise and clean up all listeners
+			const handleUnmount = () => {
+				this.off('unmount', handleUnmount); // Clean up this specific listener
+				this.destroy(); // <-- CRITICAL: Clean up ALL listeners from Events base class
+				resolve();
+			};
+
+			this.on('unmount', handleUnmount);
+
+			safeRootUnmount(this.root, this.container);
+
+			// The children were removed without react, or unmount failed
+			// Manually trigger the onUnmount emitter to run handleUnmount
+			if (!this.ref || !document.body.contains(this.ref)) {
+				this.onUnmount();
+			}
+		});
+	}
+}
+
+export function createRoot(
+	containerElementSelector: string,
+	options?: RootOptions
+): ReactRoot {
+	return new ReactRoot(containerElementSelector, options);
+}
+
+// Utility function to merge multiple refs
+export function mergeRefs<T>(
+	...refs: (MutableRefObject<T> | RefCallback<T> | null)[]
+): RefCallback<T> {
+	return (value: T) => {
+		refs.forEach((ref) => {
+			if (typeof ref === 'function') {
+				ref(value);
+			} else if (ref !== null) {
+				(ref as MutableRefObject<T | null>).current = value;
+			}
+		});
+	};
+}
+
+export type UseLifecycles<HTMLElementType extends HTMLElement = HTMLElement> =
+	MutableRefObject<HTMLElementType> & {
+		forceUpdate: () => void;
+	};
+
+// A custom hook that triggers when the component is mounted, its ref changes and it is appended on them DOM
+export function useLifecycles<
+	HTMLElementType extends HTMLElement = HTMLElement
+>(
+	props: IComponentLifecycleProps & {
+		[key: string]: any;
+	}
+): UseLifecycles<HTMLElementType> {
+	const rootElementRef: MutableRefObject<HTMLElementType> =
+		useRef<HTMLElementType | null>(null);
+
+	const { onMount, onUnmount, onUpdate, onBeforeUpdate } = props;
+
+	useEffect(() => {
+		const element = rootElementRef.current;
+
+		if (!!element) {
+			onMount?.(element);
+		}
+
+		// When the component is unmounted
+		return () => {
+			onUnmount?.();
+		};
+		// Only run this on mount and unmount.
+		// Add props as deps to get latest functions, but this is safer.
+	}, [onMount, onUnmount, rootElementRef]);
+
+	useEffect(() => {
+		const element = rootElementRef.current;
+		// Only call onUpdate if the element exists
+		if (element) {
+			onUpdate?.(element);
+		}
+		// Runs on every render/update, as intended by lack of deps, but
+		// let's add props to be explicit that it depends on them.
+	}); // Re-run if any prop changes
+
+	useLayoutEffect(() => {
+		onBeforeUpdate?.();
+	}, [onBeforeUpdate]); // Re-run if any prop changes
+
+	const useForceUpdate = () => {
+		const [value, setValue] = useState(0);
+		return () => setValue((value) => value + 1);
+	};
+
+	const forceUpdate = useForceUpdate(); // Update the component
+
+	const ref: UseLifecycles<HTMLElementType> = {
+		...rootElementRef,
+		forceUpdate,
+	};
+
+	return ref;
+}
+
+// Error boundary component
+export class ErrorBoundary extends Component<
+	{
+		onError: (error: Error, errorInfo: ErrorInfo) => void;
+		children: ReactNode;
+	} & IComponentLifecycleProps,
+	{
+		hasError: boolean;
+	}
+> {
+	constructor(props: {
+		onError: (error: Error, errorInfo: ErrorInfo) => void;
+		children: ReactNode;
+	}) {
+		super(props);
+		this.state = { hasError: false };
+	}
+
+	static getDerivedStateFromError(_error: Error) {
+		return { hasError: true };
+	}
+
+	componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+		Logger.error('ErrorBoundary caught an error', error, errorInfo);
+		this.props.onError(error, errorInfo);
+	}
+
+	componentDidMount() {
+		// @ts-ignore
+		const ownRef = ReactDOM.findDOMNode(this);
+		// @ts-ignore
+		this.props.onMount?.(ownRef);
+	}
+
+	componentDidUpdate() {
+		// @ts-ignore
+		const ownRef = ReactDOM.findDOMNode(this);
+		// @ts-ignore
+		this.props.onUpdate?.(ownRef);
+	}
+
+	// Before updating the component
+	UNSAFE_componentWillUpdate() {
+		this.props.onBeforeUpdate?.();
+	}
+
+	componentWillUnmount() {
+		this.props.onUnmount?.();
+	}
+
+	render() {
+		if (this.state.hasError) {
+			return <h1>Something went wrong.</h1>;
+		}
+
+		return this.props.children;
+	}
+}
+
+export function useQuery(): URLSearchParams {
+	const { search } = useLocation();
+
+	return useMemo(() => new URLSearchParams(search), [search]);
+}