MarekZeman91

import { type FC, useEffect, useRef, type InputHTMLAttributes, type ChangeEvent } from 'react';

export interface InputField extends InputHTMLAttributes<HTMLInputElement> {
  debounceTimeout: number;
}

export const InputField: FC<InputField> = ({ value: defaultValue, onChange, debounceTimeout = 1, ...props }) => {
  const timeoutInfo = useRef({ onChange, timeout: 0 });
  Object.assign(timeoutInfo.current, { onChange });

MarekZeman91

// 1. run Playwright with ui
// 2. paste this code in console
// 3. there is a new PIN button next to Playwright logo

window.PlaywrightStalker?.stop();
window.PlaywrightStalker = ((d = document) => {
  const $ = (sel) => d.querySelector(sel);
  const $$ = (sel) => Array.from(d.querySelectorAll(sel));
  const delay = (ms = 1) => new Promise((r) => setTimeout(r, ms));
  const h = (node, props) => Object.assign(d.createElement(node), props);

MarekZeman91

/**
 * Clone value deeply, ignore custom classes, symbols and functions
 * @param value
 * @return cloneOfValue
 */
export function deepClone<T>(value: T): T {
  if (typeof value !== 'object' || !value) {
    return value;
  }

MarekZeman91

import { useState } from "react";

export function useUpdate(): [number, () => void] {
  const [state, setState] = useState(0);
  return [state, () => setState(Date.now())];
}

MarekZeman91

import { useMemo } from "react";

import { useArrayHash } from "./useArrayHash";

export function useMemoizedArray<T1, T2 = T1>(
  array: T1[],
  hashKey: keyof T1,
): [T2[], string];

export function useMemoizedArray<T1, T2 = T1>(

MarekZeman91

export function useArrayHash<T>(array: T[], key: keyof T): string {
  return array.map((x) => x[key]).join("");
}

MarekZeman91

import type { Dispatch } from "react";
import { useState } from "react";

export function useAutoResetState<S>(
  initialState: S | (() => S),
): [S, Dispatch<S>] {
  const [state, setState] = useState(initialState);
  return [
    state,
    (temporaryState: S) => {

MarekZeman91

export function el<K extends keyof HTMLElementTagNameMap>(
  nodeName: K,
  props?: Record<string, any>,
  children?: (string | number | boolean | Node)[],
): HTMLElementTagNameMap[K];

export function el<T extends HTMLElement>(
  nodeName: string,
  props?: Record<string, any>,
  children?: (string | number | boolean | Node)[],

MarekZeman91

const triggerDownload = (blob: Blob, filename: string) => {
  const url = window.URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.download = filename;
  link.href = url;

  document.body.appendChild(link);

  link.dispatchEvent(new MouseEvent('click', {
    bubbles: true,

MarekZeman91

import { createRef, ForwardedRef, forwardRef, useImperativeHandle, useRef } from 'react';

interface ForwardedHandlers<T> {
  getValue(): T;
}

interface ForwardedProps<T> {
  value: T;
  children?: never;
}