tjunghans

Vite + Vitest + TypeScript + React Component Structure Guidelines

All source code lives under ./src.

1. Components Location

• All React components are stored in ./src/components/.
• Simple components:
  • Use a single file named after the component. Example: MyComponent.tsx exports the MyComponent component.
• One exported component per .tsx file.

tjunghans

• One exported class per file. Event better, one class per file. Uppercase *.ts file, example: MyClass.ts
• One exported React component per file. Event better, one React component per file. Uppercase *.tsx file, example MyComponent.ts.
• Hide complexity and simplify imports with folders and barrel files (index.ts).
• Utilities, functions are in lowercase files.
• Custom hooks are in "useMyCustomhook.ts" files.

tjunghans

• One exported class per file. Event better, one class per file. Uppercase *.ts file, example: MyClass.ts
• One exported React component per file. Event better, one React component per file. Uppercase *.tsx file, example MyComponent.ts.
• Hide complexity and simplify imports with folders and barrel files (index.ts).
• Utilities, functions are in lowercase files.
• Custom hooks are in "useMyCustomhook.ts" files.

tjunghans

export enum ActionType {
  CreateSomething,
  UpdateSomething,
  DeleteSomething,
  RetrieveSomething
}

tjunghans

const isPortnumber = (value: number): boolean => {
  // https://en.wikipedia.org/wiki/Registered_port
  return value >= 0 && value <= 65535;
};
                                     
const isValidPortnumber = (value: unknown): value is number => {
  if (typeof value === "number") {
    return isPortnumber(value);
  }

tjunghans

On xyz master branch run the following to get the count for the year 2024.

git log --format="%h %an %Cgreen%as%Creset %d" --first-parent --tags --no-walk | grep -c -e '2024'

Omit “-c” to list the entries for 2024:

git log --format="%h %an %Cgreen%as%Creset %d" --first-parent --tags --no-walk | grep -e '2024'

tjunghans

// Place this file inside <projectRoot>/__mocks__/react-query.js
export const useQuery = jest
  .fn()
  .mockReturnValue({ data: {}, isLoading: false, error: {} });

export class QueryClient {}

tjunghans

import React, { type DetailedHTMLProps, type HTMLAttributes } from "react";

export const createComponentMock = <
  T extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
>(
  componentName: string
) => {
  const fakeComponent = (props: T) => (
    <div data-testid={componentName} {...props} />
  );

tjunghans

// See https://gist.github.com/tjunghans/0129439ad12b37b98c72477156cddbce for the definition of `doSomethingAsync`.

function MyComponent({ someprop }) {
  const [value, setValue] = React.useState("");

  React.useEffect(() => {
    // Create an instance of the AbortController that will
    // be used to abort in the useEffect return.
    const controller = new AbortController();
    

tjunghans

// The implementation below is inspired by the [example](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal#examples)
// that shows how a fetch operation can be aborted using the signal option.
// See https://gist.github.com/tjunghans/da50cc29f3f965d587db99c2f44813f1 for an example on how `doSomethingAsync` is used.

function doSomethingAsync(
  // payload can be anything. It's just an example
  payload,
  { signal }: { signal?: AbortSignal } = {}
): Promise<any> {
  // Abort immediately if `abort` was already called.