| 3 | export type PartialKeys<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>> |
| 4 | |
| 5 | export function memo<TDeps extends ReadonlyArray<any>, TResult>( |
| 6 | getDeps: () => [...TDeps], |
| 7 | fn: (...args: NoInfer<[...TDeps]>) => TResult, |
| 8 | opts: { |
| 9 | key: false | string |
| 10 | debug?: () => boolean |
| 11 | onChange?: (result: TResult) => void |
| 12 | initialDeps?: TDeps |
| 13 | }, |
| 14 | ) { |
| 15 | let deps = opts.initialDeps ?? [] |
| 16 | let result: TResult | undefined |
| 17 | |
| 18 | return (): TResult => { |
| 19 | let depTime: number |
| 20 | if (opts.key && opts.debug?.()) depTime = Date.now() |
| 21 | |
| 22 | const newDeps = getDeps() |
| 23 | |
| 24 | const depsChanged = |
| 25 | newDeps.length !== deps.length || |
| 26 | newDeps.some((dep: any, index: number) => deps[index] !== dep) |
| 27 | |
| 28 | if (!depsChanged) { |
| 29 | return result! |
| 30 | } |
| 31 | |
| 32 | deps = newDeps |
| 33 | |
| 34 | let resultTime: number |
| 35 | if (opts.key && opts.debug?.()) resultTime = Date.now() |
| 36 | |
| 37 | result = fn(...newDeps) |
| 38 | |
| 39 | if (opts.key && opts.debug?.()) { |
| 40 | const depEndTime = Math.round((Date.now() - depTime!) * 100) / 100 |
| 41 | const resultEndTime = Math.round((Date.now() - resultTime!) * 100) / 100 |
| 42 | const resultFpsPercentage = resultEndTime / 16 |
| 43 | |
| 44 | const pad = (str: number | string, num: number) => { |
| 45 | str = String(str) |
| 46 | while (str.length < num) { |
| 47 | str = ' ' + str |
| 48 | } |
| 49 | return str |
| 50 | } |
| 51 | |
| 52 | console.info( |
| 53 | `%c⏱ ${pad(resultEndTime, 5)} /${pad(depEndTime, 5)} ms`, |
| 54 | ` |
| 55 | font-size: .6rem; |
| 56 | font-weight: bold; |
| 57 | color: hsl(${Math.max( |
| 58 | 0, |
| 59 | Math.min(120 - 120 * resultFpsPercentage, 120), |
| 60 | )}deg 100% 31%);`, |
| 61 | opts?.key, |
| 62 | ) |