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

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

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

import { useEffect, useState } from 'react';

/**
 * Use the last value that isn't `null` or `undefined`.
 * Useful for instance in modals where you don't want the selected item to flicker when the modal is closed.
 */
export function useLastNonNullableValue<T>(currentValue: T) {
  const [value, setValue] = useState(currentValue);
  useEffect(() => {
    setValue((stored) => currentValue ?? stored);

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 {

KATT

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

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

name: Cypress

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest
    timeout-minutes: 20

    services: