KATT

Record<string, x | undefined>

Represent maps

// rather than 
const map: {[ key: string ]: string} = {
  foo: 'bar',
}

KATT

import { Router } from 'next/router';
import { useEffect } from 'react';
import { publicConfig } from '~/shared/config';
import { trpc } from '~/utils/trpc';

let initVersion = publicConfig.GIT_COMMIT;

function useDetectVersionChange() {
  const healthQuery = trpc.health.useQuery(undefined, {
    refetchInterval: 10_000,

KATT

/**
 * @link https://raw.githubusercontent.com/NaturalCycles/js-lib/master/src/promise/pProps.ts
 * Promise.all for Object instead of Array.
 *
 * Inspired by Bluebird Promise.props() and https://github.com/sindresorhus/p-props
 *
 * Improvements:
 *
 * - Exported as { promiseProps }, so IDE auto-completion works

KATT

I've been working with React since 2015 so it's more than "a feeling", so trying to put words on my reasoning below. Obviously open for input and to be proven wrong.

Why colocating code is often preferable over breaking it up into files

Optimize for code deletability confidence in changes

• Once you remove pages/X.jsx and everything is vendored - you'll automatically delete all the dependencies without leaving any traces
• With our linting, you will prompted to delete unused code automatically

KATT

// usage examples

// callback
const err1 = await waitError(() => { /* do something that throws */ })

// async callback
const err2 = await waitError(async () => { /* do something async that throws */ })

// expect a promise instance to throw
const err3 = await waitError(promise) 

KATT

I made a mini library out of this, have a look att github.com/KATT/next-router-query

KATT

import {
  createReactQueryHooks,
  TRPCClientErrorLike,
  UseTRPCMutationOptions,
  UseTRPCQueryOptions,
} from '@trpc/react';
import type { inferProcedureInput, inferProcedureOutput } from '@trpc/server';
import { NextPageContext } from 'next';
// ℹ️ Type-only import:
// https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export

KATT

// Next.js' `_app.js` file

import Head from 'next/head';
import { useEffect, useState } from 'react';
import '../styles/main.scss';

function useIsMounted() {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {

KATT

import { z } from 'zod';
import { TRPCError } from '@trpc/server';

/**
 * Output parser. Example use-cases:
 * - Resolvers where you touch sensitive data that you don't wanna risk leaking
 * - Hairy resolvers where it's hard to follow what the resolver returns
 * @param schema Zod Schema
 * @param output The output
 * @returns A parsed output, guaranteed to conform to the schema

KATT

import React, { Component, ErrorInfo, ReactNode } from 'react';
import NextError from 'next/error';
import { TRPCClientErrorLike } from '@trpc/client';
import { AppRouter } from 'server/routers/_app';

interface Props {
  children: ReactNode;
}

interface State {