All files / react-classic/src dev.ts

100% Statements 42/42
100% Branches 20/20
100% Functions 7/7
100% Lines 42/42

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 551x     1x 1x 1x 1x   1x 38x 38x 38x   1x 3x 3x   1x 5x 5x   1x 33x 33x 33x   1x 3x 3x   1x 1x 6x   6x 2x 2x 1x 1x 2x 2x   6x 2x 2x 6x   3x 3x   3x 1x 3x 3x  
import { microbatch } from '@anchorlib/core';
import type { RefObject } from 'react';
 
export let DEV_MODE = true;
export let STRICT_MODE = true;
export let DEBUG_RENDERER = false;
export let DEBUG_RENDERER_DURATION = 300;
 
export function setDevMode(enabled: boolean, strict?: boolean) {
  DEV_MODE = enabled;
  STRICT_MODE = strict ?? STRICT_MODE;
}
 
export function isDevMode() {
  return DEV_MODE;
}
 
export function isStrictMode() {
  return STRICT_MODE;
}
 
export function setDebugRenderer(enabled: boolean, duration?: number) {
  DEBUG_RENDERER = enabled;
  DEBUG_RENDERER_DURATION = duration ?? DEBUG_RENDERER_DURATION;
}
 
export function isDebugRenderer() {
  return DEBUG_RENDERER;
}
 
const [schedule] = microbatch(0);
export function debugRender<T extends HTMLElement>(ref?: RefObject<T | null>) {
  if (!DEBUG_RENDERER || !ref) return;
 
  if (!ref?.current) {
    return schedule(() => {
      if (ref?.current?.style) {
        flashNode(ref?.current, 'rgba(252,75,75,0.75)');
      }
    });
  }
 
  if (ref?.current?.style) {
    schedule(() => flashNode(ref?.current as HTMLElement));
  }
}
 
function flashNode(element: HTMLElement, color = 'rgba(0,140,255,0.75)') {
  element.style.boxShadow = `0 0 0 1px ${color}`;
 
  setTimeout(() => {
    element.style.boxShadow = '';
  }, DEBUG_RENDERER_DURATION);
}