TClark1011

module.exports = {
	"*.{js,ts,svelte}": "eslint --cache --fix",
	"*.{js,css,md,ts,svelte}": "prettier --write",
};

TClark1011

First run

yarn add --dev jest babel-jest @babel/preset-env svelte-jester jest-transform-stub @testing-library/svelte @testing-library/user-event babel-plugin-transform-vite-meta-env @testing-library/jest-dom ts-jest

Then copy over jest.config.json into project root.

Run with

TClark1011

// branded types to allow for better type inference
// with default generic types
/* eslint-disable @typescript-eslint/naming-convention */
type NO_PAYLOAD = {
	JgJES6BF8uyaOwF1: "FY7eBhPYJlqOxuVp";
};

type OPTIONAL_PAYLOAD = {
	A7nWdXs0r5RLuHRf: "zPcrRNRIl4r5IHbA";
};

TClark1011

Event Functions In React

When writing functions that can handle various different types of dom events in react, it's important to remember that react uses its own custom type of events which it calls "synthetic events". To best handle these, we create a custom type which can be either a native event or a react synthetic event.

Example code

import type { SyntheticEvent } from 'react';

type ReactCompatibleEvent = Event | SyntheticEvent;

TClark1011

import { extendTheme } from '@chakra-ui/react';

export const theme = extendTheme({
  layerStyles: {
    noFocusOutline: {
      '--chakra-shadows-outline': 'none',
    },
  },
  config: {
    useSystemColorMode: true,