fix: bundled type declarations (#57)

* Declarations refactor (types.ts / globals.d.ts)

typings.d.ts has been refactored—utility/data types are now in types.ts, and globals/module augmentations in globals.d.ts. Publicly consumed types are now included in declaration emit, module augmentations skipped. Missing type import and export have also been added.

* type imports cleanup + usePerf refinement

src/components/Graph.tsx

@@ -1,12 +1,12 @@
-import { FC, useMemo, useRef } from 'react';
+import { type FC, useMemo, useRef } from 'react';
 import { matriceCount, matriceWorldCount } from './PerfHeadless';
 import { Graph, Graphpc } from '../styles';
 import { PauseIcon } from '@radix-ui/react-icons';
-import { Canvas, useFrame, Viewport } from '@react-three/fiber';
-import { getPerf, usePerf } from '..';
+import { Canvas, useFrame, type Viewport } from '@react-three/fiber';
+import { getPerf, usePerf } from '../store';
 import { colorsGraph } from './Perf';
 import * as THREE from 'three';
-import { PerfUIProps } from '../typings';
+import type { PerfUIProps } from '../types';
 import { TextsHighHZ } from './TextsHighHZ';
 
 export interface graphData {
@@ -36,7 +36,7 @@ const ChartCurve:FC<PerfUIProps> = ({colorBlind, minimal, chart= {length: 120, h
   const updatePoints = (element: string, factor: number = 1, ref: any, viewport: Viewport) => {
     let maxVal = 0;
     const {width: w, height: h} = viewport
-    
+
     const chart = getPerf().chart.data[element];
     if (!chart || chart.length === 0) {
       return
@@ -51,17 +51,17 @@ const ChartCurve:FC<PerfUIProps> = ({colorBlind, minimal, chart= {length: 120, h
           maxVal = chart[id] * factor;
         }
         dummyVec3.set(padding + i / (len - 1) * (w - padding * 2) - w / 2, (Math.min(100, chart[id]) * factor) / 100 * (h - padding * 2 - paddingTop) - h / 2, 0)
-        
+
         dummyVec3.toArray(ref.attributes.position.array, i * 3)
       }
     }
-    
+
     ref.attributes.position.needsUpdate = true;
   };
 
   // const [supportMemory] = useState(window.performance.memory)
   useFrame(function updateChartCurve({viewport}) {
-    
+
     updatePoints('fps', 1, fpsRef.current, viewport)
     if (fpsMatRef.current) {
       fpsMatRef.current.color.set(getPerf().overclockingFps ? colorsGraph(colorBlind).overClock.toString() : `rgb(${colorsGraph(colorBlind).fps.toString()})`)
@@ -212,6 +212,6 @@ const Renderer = () =>{
     matriceCount.value = 0
   }, Infinity)
 
-  
+
   return null
 }

src/components/HtmlMinimal.tsx

@@ -1,5 +1,5 @@
 import { useThree } from '@react-three/fiber'
-import React, { forwardRef, ReactNode, useLayoutEffect, useRef } from 'react'
+import React, { forwardRef, type ReactNode, useLayoutEffect, useRef, useEffect } from 'react'
 // @ts-ignore
 import { createRoot, Root } from 'react-dom/client'
 

src/components/Perf.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useRef } from 'react'
+import React, { type FC, useRef } from 'react'
 import { ChartUI } from './Graph'
 import {
   ActivityLogIcon,
@@ -23,7 +23,7 @@ import { PerfHeadless } from './PerfHeadless'
 import { Toggle, PerfS, PerfIContainer, PerfI, PerfB, ToggleContainer, ContainerScroll, PerfSmallI } from '../styles'
 import { ProgramsUI } from './Program'
 import { setPerf, usePerf } from '../store'
-import { PerfPropsGui } from '../typings'
+import type { PerfPropsGui } from '../types'
 
 interface colors {
   [index: string]: string

src/components/PerfHeadless.tsx

@@ -1,11 +1,11 @@
-import { FC, HTMLAttributes, useEffect, useMemo } from 'react'
+import { type FC, type HTMLAttributes, useEffect, useMemo } from 'react'
 import { addEffect, addAfterEffect, useThree, addTail } from '@react-three/fiber'
 import { overLimitFps, GLPerf } from '../internal'
 
 import * as THREE from 'three'
 import { countGeoDrawCalls } from '../helpers/countGeoDrawCalls'
-import { getPerf, ProgramsPerfs, setPerf } from '../store'
-import { PerfProps } from '../typings'
+import { getPerf, type ProgramsPerfs, setPerf } from '../store'
+import type { PerfProps } from '../types'
 import { emitEvent } from '@utsubo/events'
 
 // cameras from r3f-perf scene

src/components/Program.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from 'react';
+import { type FC, useEffect, useState } from 'react';
 
 import {
   ProgramGeo,
@@ -14,10 +14,9 @@ import {
   ProgramsGeoLi,
   ProgramsContainer,
 } from '../styles';
-import { usePerf } from '..';
 import { ActivityLogIcon, ButtonIcon, CubeIcon, EyeNoneIcon, EyeOpenIcon, ImageIcon, LayersIcon, RocketIcon, TriangleDownIcon, TriangleUpIcon, VercelLogoIcon } from '@radix-ui/react-icons';
-import { ProgramsPerf } from '../store';
-import { PerfProps } from '../typings';
+import { usePerf, type ProgramsPerf } from '../store';
+import type { PerfProps } from '../types';
 import { estimateBytesUsed } from '../helpers/estimateBytesUsed';
 
 const addTextureUniforms = (id: string, texture: any) => {

src/components/TextsHighHZ.tsx

@@ -1,11 +1,11 @@
-import { FC, memo, Suspense, useRef } from 'react'
+import { type FC, memo, Suspense, useRef } from 'react'
 import { matriceCount, matriceWorldCount } from './PerfHeadless'
-import { useFrame, useThree } from '@react-three/fiber'
+import { useThree } from '@react-three/fiber'
 import { Text } from '@react-three/drei'
 import { getPerf } from '..'
 import { colorsGraph } from './Perf'
 import * as THREE from 'three'
-import { customData, PerfUIProps } from '../typings'
+import type { customData, PerfUIProps } from '../types'
 import { useEvent } from '@utsubo/events'
 import localFont from '../roboto.woff'
 

src/globals.d.ts

@@ -0,0 +1,6 @@
+declare module '*.woff';
+
+declare module '*.css' {
+  const content: { [className: string]: string }
+  export default content
+}

src/helpers/countGeoDrawCalls.ts

@@ -1,4 +1,4 @@
-import { drawCounts, ProgramsPerfs } from '../store'
+import type { drawCounts, ProgramsPerfs } from '../store'
 
 export const countGeoDrawCalls = (programs: ProgramsPerfs) => {
   programs.forEach((program, _pkey) => {

src/store.ts

@@ -178,7 +178,7 @@ export const usePerfImpl = createWithEqualityFn<State>((set, get): any => {
   }
 })
 
-const usePerf = (sel: (state: State) => unknown) => usePerfImpl(sel, shallow)
+const usePerf = <S>(sel: (state: State) => S) => usePerfImpl(sel, shallow)
 Object.assign(usePerf, usePerfImpl)
 const { getState: getPerf, setState: setPerf } = usePerfImpl
 

src/typings.d.ts → src/types.ts

@@ -1,7 +1,4 @@
-declare module '*.css' {
-  const content: { [className: string]: string }
-  export default content
-}
+import type { HTMLAttributes } from 'react'
 
 export type chart = {
   length: number
@@ -34,7 +31,7 @@ export interface PerfPropsGui extends PerfProps {
   style?: object
 }
 
-interface PerfUIProps extends HTMLAttributes<HTMLDivElement> {
+export interface PerfUIProps extends HTMLAttributes<HTMLDivElement> {
   perfContainerRef?: any
   colorBlind?: boolean
   showGraph?: boolean