itsMapleLeaf

I believe zero-config with the option for minimal extensibility is the way forward for modern build tooling. All tools listed here have typescript support, since that's basically a requirement for me nowadays

1. Vite

Pros:

Vite is very fast due to its reliance on browser ES modules at dev time
Uses esbuild under the hood, very fast transpiling
Uses rollup to make very light production bundles
The out-of-the-box config works well for most frontend frameworks, including React, Vue, and Svelte
Config is minimal but extensive enough to support pretty much whatever you need to do

	// this has a block, needs a return statement
	const fn1 = () => {
	return 1
	}

	// this does the same as the above,
	// if you're returning something without other stuff, no need for curly braces
	const fn2 = () => 1

	// adding parentheses is just a stylistic choice, it does the same thing

	const [media, setMedia] = useState([])

	// no good
	// the media state is in the parent,
	// but we have to check here _and_ in the child to see how media gets updated,
	// and MediaUploader is tightly coupled to this component's state
	<MediaUploader
	media={media}
	setMedia={setMedia}
	/>

	{
	"quoteProps": "consistent",
	"semi": false,
	"trailingComma": "all",
	"useTabs": true
	}

	const socketRef = useRef();
	const [connected, setConnected] = useState(false);

	// this ref based off of the "connected" state lets us read it in `connect`
	// without having to declare it as a dependency
	const connectedRef = useRef(connected);
	useEffect(() => {
	connectedRef.current = connected;
	});

	import { useCallback, useState } from "react"

	const emptyDict = {}

	export default function useDict<T>(
	initialItems: Record<string, T \| undefined> = emptyDict,
	) {
	const [items, setItems] = useState(initialItems)

	const add = useCallback(

	type ValidatorResult<T> = { type: "valid" } \| { type: "invalid"; error: string }

	type ValidateFn<T> = (value: unknown) => ValidatorResult<T>

	type Validator<T = unknown> = {
	validate: ValidateFn<T>
	parse: (value: unknown) => T
	is: (value: unknown) => value is T
	}

	import { useEffect, useState } from "react"

	export type Atom<T> = {
	set(newValue: T): void
	get(): T
	listen(listener: (value: T) => void): () => void
	}

	export function createAtom<T>(initialValue: T): Atom<T> {
	let currentValue = initialValue

	import { Interpolation } from "@emotion/core"
	import { css } from "./styled"

	type SizeUnit =
	\| 0
	\| 1
	\| 2
	\| 3
	\| 4
	\| 5

	type Validator<T = unknown> = {
	parse: (value: unknown) => T
	is: (value: unknown) => value is T
	}

	type ValidatorType<V> = V extends Validator<infer T> ? T : never

	type ValueOf<T> = T extends readonly (infer V)[] ? V : T[keyof T]

	const raise = (error: string): never => {