TClark1011 · December 4, 2025 01:18
diff --git a/bigtincan---Bridge Mobile Problems.md b/bigtincan---Bridge Mobile Problems.md
diff --git a/bigtincan---Deleting Files.md b/bigtincan---Deleting Files.md
diff --git a/bigtincan---entityName Type Inference Proof of Concept.md b/bigtincan---entityName Type Inference Proof of Concept.md
diff --git a/bigtincan---HS Form Submissions.md b/bigtincan---HS Form Submissions.md
diff --git a/bigtincan---Improved Craco Config.md b/bigtincan---Improved Craco Config.md
diff --git a/bigtincan---React Error Boundary.md b/bigtincan---React Error Boundary.md
diff --git a/bigtincan---Searching With Tags.md b/bigtincan---Searching With Tags.md
diff --git a/css---Common CSS Styling Trip Ups.md b/css---Common CSS Styling Trip Ups.md
diff --git a/css---Do Not Use Margins to Simulate Spaces.md b/css---Do Not Use Margins to Simulate Spaces.md
diff --git a/css---grid-auto-columns.css b/css---grid-auto-columns.css
 /**
 * This allows you to use a CSS grid to have columns
 * that automatically adjust to fill the entire width
 * of the container
 */

 .grid {
 	/* In order for this to work, you must have specific min and max widths
 	   for the columns  */
 	--column-max-width: your-max-width-here;
 	--column-min-width: your-min-width-here;

 	display: grid;
 	grid-template-columns: repeat(
 		auto-fit,
 		minmax(var(--column-min-width), var(--column-max-width))
 	);
 	justify-content: space-between; /* If it can't fill the parent exactly, space the items out */
 }
diff --git a/css---grid-responsive-columns.css b/css---grid-responsive-columns.css
 /* 
 * This is a quick and easy method for having a grid where all columns
 * are the same dynamic width, and the number of columns changes 
 * responsively at different breakpoints
 */

 .grid {
 	--column-count: 2; /* The number of columns you want for mobile */

 	/* 
 	 * If you are designing for desktop primarily, the initial value for
 	 * `--column-count` should be the number of columns you want for desktop,
 	 * and adjust the media queries accordingly.
 	 */

 	display: grid;
 	grid-template-columns: repeat(var(--column-count), minmax(0, 1fr));
 	/* 
 	 * `minmax(0, 1fr)` makes sure all columns are the same width.
 	 * If you need a minimum column width, pass it as the first argument
 	 * in `minmax` instead of `0`.
 	 */
 }

 @media screen and (min-width: 768px) {
 	.grid {
 		--column-count: 4;
 	}
 }

 @media screen and (min-width: 1024px) {
 	.grid {
 		--column-count: 6;
 	}
 }

 @media screen and (min-width: 1280px) {
 	.grid {
 		--column-count: 8;
 	}
 }
diff --git a/css---min-layout-framework-draft.scss b/css---min-layout-framework-draft.scss
 /**
 * THIS IS A DRAFT OF A MINIMALIST LAYOUT CSS FRAMEWORK, THE GOAL WOULD BE TO
 * TO PROVIDE A LIGHTWEIGHT, OPINIONATED APPROACH TO LAYOUTS LIKE BOOTSTRAP,
 * BUT WITHOUT THE BAGGAGE OF A FULL CSS FRAMEWORK.
 */

 // CONFIGURATION
 $config-max-grid-columns: 12;

 // When defining breakpoints, we treat mobile devices as the default
 // and define breakpoints as min-width for larger devices.
 $config-bp-tablet-min: 768px;
 $config-bp-desktop-min: 1024px;

 // TODO: define key/value pairs for breakpoints so they
 // can be iterated through

 @if $config-max-grid-columns < 1 {
 	@error "The maximum number of grid columns must be at least 1";
 }

 // TODO: define all the styles as a mixin, then define the base
 // along with breakpoint conditionals.



 // STYLES
 .flex {
 	&.row,&.col {
 		display: flex;
 	}

 	&.row {
 		flex-direction: row;

 		&.h- {
 			&center {
 				justify-content: center;
 			}
 			&left {
 				justify-content: flex-start;
 			}
 			&right {
 				justify-content: flex-end;
 			}
 			&between {
 				justify-content: space-between;
 			}
 			&around {
 				justify-content: space-around;
 			}
 		}

 		&.v- {
 			&center {
 				align-items: center;
 			}
 			&top {
 				align-items: flex-start;
 			}
 			&bottom {
 				align-items: flex-end;
 			}
 			&stretch {
 				align-items: stretch;
 			}
 		}
 	}

 	&.col {
 		flex-direction: column;

 		&.h- {
 			&center {
 				align-items: center;
 			}
 			&top {
 				align-items: flex-start;
 			}
 			&bottom {
 				align-items: flex-end;
 			}
 			&stretch {
 				align-items: stretch;
 			}
 		}

 		&.v- {
 			&center {
 				justify-content: center;
 			}
 			&left {
 				justify-content: flex-start;
 			}
 			&right {
 				justify-content: flex-end;
 			}
 			&between {
 				justify-content: space-between;
 			}
 			&around {
 				justify-content: space-around;
 			}
 		}
 	}
 }

 .grid {
 	display: grid;
 	@for $i from 1 through $config-max-grid-columns {
 		&.col-#{$i} {
 			grid-template-columns: repeat($i, 1fr);
 		}
 	}
 }

diff --git a/css---scss-theming-draft.scss b/css---scss-theming-draft.scss
 /**
 * An example of how you can use Sass variables and CSS
 * custom properties to theme your application.
 */
 @use 'sass:map';

 /**
 * By using Sass variables to contain our CSS custom properties,
 * we can prevent mistakes in our code, as the Sass compiler will
 * throw an error if we reference a variable that does not exist.
 */

 $color-primary: '--color-primary';
 $color-primary-foreground: '--color-primary-foreground';

 $color-secondary: '--color-secondary';
 $color-secondary-foreground: '--color-secondary-foreground';

 $color-schemes: (
  light: (
    mode: light,
    primary: #007bff,
    primary-foreground: #ffffff,
    secondary: #6c757d,
    secondary-foreground: #ffffff
  ),
  dark: (
    mode: dark,
    primary: #375a7f,
    primary-foreground: #ffffff,
    secondary: #444,
    secondary-foreground: #ffffff
  )
 );

 /**
 * Take a map containing the color values for a color scheme
 * and define the corresponding CSS custom properties.
 */

 @mixin apply-color-scheme($scheme) {
  color-scheme: map.get($scheme, mode);
  #{$color-primary}: map-get-essential($scheme, primary);
  #{$color-primary-foreground}: map-get-essential($scheme, primary-foreground);
  #{$color-secondary}: map-get-essential($scheme, secondary);
  #{$color-secondary-foreground}: map-get-essential($scheme, secondary-foreground);
 }

 @function map-get-essential($map, $key) {
  $value: map.get($map, $key);
  @if not $value {
    @error "Key `#{$key}` not found in map `#{$map}`.";
  }
  @return $value;
 }

 /**
 * Shorthand QOL helper that lets us use our CSS custom properties
 * without having to write out string interpolation every time.
 */
 @function _var($name, $fallback: null) {
  @return var(#{($name, $fallback)});
  // The weird syntax with the list makes sure the fallback
  // won't get passed in if its null.
 }

 html {
  @include apply-color-scheme(map.get($color-schemes, light)); // Default to light theme

  @each $key, $scheme in $color-schemes {
    &.theme--#{$key} {
      @include apply-color-scheme($scheme);
    }
  }
 }

 // EXAMPLE COMPONENT STYLE

 button {
  padding: 10px 20px;
  border-radius: 5px;

  background-color: _var($color-primary);
  color: _var($color-primary-foreground);
  border: none;

  cursor: pointer;

  &:hover {
    background-color: _var($color-secondary);
    color: _var($color-secondary-foreground);
  }
 }
diff --git a/css---Why Do SVGs Have Extra Bottom Padding.md b/css---Why Do SVGs Have Extra Bottom Padding.md
diff --git a/fun-ts---dependency-injection-basic.ts b/fun-ts---dependency-injection-basic.ts
 /* eslint-disable @typescript-eslint/no-unused-vars */

 /**
 * This is a basic implementation of type-safe dependency injection. It uses
 * generator functions that yield `InjectionYield` instances, which specify
 * what class then must be injected. The `injectDependenciesAndRun` takes
 * such a generator function and an array of all the classes that can be
 * injected, and runs the generator, injecting the required dependencies.
 */

 /**
 * TODO:
 * - Find a way to allow substitute classes to extend from the base class.
 * Currently the typing system only allows for classes that match the
 * dependency class exactly, with no extra fields. Try disallowing the
 * dependencies to be inferred from the array of depenendency classes,
 * although this may remove the type-checking that enforces all dependency
 * classes are provided, although that can be re-achieved by other means.
 */

 // # UTILS

 type Class<T, Arguments extends unknown[] = any[]> = {
 	prototype: Pick<T, keyof T>;
 	new (...arguments_: Arguments): T;
 };

 type InferClassInstance<T> = T extends Class<infer U> ? U : never;

 type InferClassConstructorArguments<T> = T extends Class<any, infer U>
 	? U
 	: never;

 type InferGeneratorReturnType<T extends Generator> = T extends Generator<
 	any,
 	infer U,
 	any
 >
 	? U
 	: never;

 //#  MAIN LOGIC

 type DependantGenerator<DependentClass extends Class<any>, Return> = Generator<
 	InjectionYield<DependentClass>,
 	Return,
 	InferClassInstance<DependentClass>
 >;

 class InjectionYield<TheClass extends Class<any>> {
 	public readonly args: InferClassConstructorArguments<TheClass>;

 	constructor(
 		public readonly cls: TheClass,
 		...args: InferClassConstructorArguments<TheClass>
 	) {
 		this.args = args;
 	}

 	*[Symbol.iterator](): Generator<
 		this,
 		InferClassInstance<TheClass>,
 		InferClassInstance<TheClass>
 	> {
 		const theInstance = yield this;

 		return theInstance;
 	}
 }

 const compareClasses = (a: Class<any>, b: Class<any>) => {
 	const aClasses = [a, ...(SUBSTITUTES.get(a) || [])];
 	const bClasses = [b, ...(SUBSTITUTES.get(b) || [])];

 	return aClasses.some((aCls) => bClasses.includes(aCls));
 };

 const withDependencies =
 	<
 		DependencyClass extends Class<any>,
 		TGenFunc extends (
 			...args: any[]
 		) => DependantGenerator<DependencyClass, any>,
 	>(
 		genFunc: TGenFunc,
 		dependencies: DependencyClass[],
 	) =>
 	(
 		...args: Parameters<TGenFunc>
 	): InferGeneratorReturnType<ReturnType<TGenFunc>> => {
 		const generator = genFunc(...args);

 		// Iterator over generator
 		let currentInjectionYield = generator.next();

 		while (!currentInjectionYield.done) {
 			const classToInject = dependencies.find((cls) =>
 				compareClasses(cls || cls, currentInjectionYield.value.cls),
 			);

 			if (!classToInject)
 				throw new Error(
 					`Dependency not provided: ${currentInjectionYield.value.cls.name}`,
 				);

 			currentInjectionYield = generator.next(
 				new classToInject(...currentInjectionYield.value.args),
 			);
 		}

 		return currentInjectionYield.value;
 	};

 // Maps classes to other classes that can substitute for them
 const SUBSTITUTES = new WeakMap<Class<any>, Class<any>[]>();

 /**
 * Class decorator that allows a class to be used as a substitute for
 * another in dependency injection. The type of the substitute class
 * must be compatible with the original class. It is recommended that
 * substitute classes `implement` the original class to ensure type
 * compatibility.
 *
 * Substitution relationships are birdirectional, so if `A` is a substitute
 * for `B`, then `B` is also a substitute for `A`. This is required to allow
 *
 */
 function SubstituteFor<T extends Class<any>>(original: T) {
 	return function <U extends Class<any>>(target: U) {
 		const originalSubstitutes = SUBSTITUTES.get(original) || [];
 		originalSubstitutes.push(target);
 		SUBSTITUTES.set(original, originalSubstitutes);

 		const targetSubstitutes = SUBSTITUTES.get(target) || [];
 		targetSubstitutes.push(original);
 		SUBSTITUTES.set(target, targetSubstitutes);
 	};
 }

 // # EXAMPLE

 class StubService {
 	doSomething() {
 		console.log("Hi from StubService");
 	}
 }

 @SubstituteFor(StubService) // This class will be recognized as a substitute for StubService in DI
 class MockStubService implements StubService {
 	doSomething() {
 		console.log("I am a sneaky mock of StubService!");
 	}
 }

 class AltStubService {
 	constructor(public someArg: string) {}

 	exampleMethod() {
 		console.log("Hi from AltStubService, I received this arg:", this.someArg);
 	}
 }

 function* a() {
 	const stubService = yield* new InjectionYield(StubService);
 	const altStubService = yield* new InjectionYield(
 		AltStubService,
 		"an argument",
 	);

 	stubService.doSomething();
 	altStubService.exampleMethod();

 	return "All done!" as const;
 }

 const result = withDependencies(a, [StubService, AltStubService])();

 console.log("[a RETURN VALUE] ", result);

 // Nested DI function calls automatically add dependencies to typing

 function* b(paramA: number, paramB: number) {
 	const resultFromA = yield* a();

 	return "hi from B" as const;
 }

 const result2 = withDependencies(b, [MockStubService, AltStubService])(1, 2); // Can pass in mock classes if the types work

 // # Advanced example usage

 /**
 * This will demonstrate a use case of dependency injection, we will
 * inject a mock service that ensures a normally unpredictable service
 * returns values that are predictable, which could be useful for testing.
 */

 /**
 * Pseudo-random number generator. Generated numbers will be unpredictable,
 * for humans, but will always be the same for the same seed.
 *
 * It works by taking a starting seed, then generating a new number using
 * that seed, and then takes the new generated value and uses that as the
 * next seed, and so on.
 */
 class DeterministicRandomService {
 	constructor(private seed: number) {
 		this.next(); // Warm up the generator
 	}

 	next(): number {
 		this.seed = (this.seed * 48271) % 2147483647;
 		return this.seed / 2147483647;
 	}
 }

 function* randomNumberGame(seed: number) {
 	console.log("----- NEW GAME -----");
 	console.log("Starting a new game with seed:", seed);

 	const randomService = yield* new InjectionYield(
 		DeterministicRandomService,
 		seed,
 	);

 	const playerARoll = randomService.next();
 	const playerBRoll = randomService.next();

 	console.log(`Player A rolled: ${playerARoll}`);
 	console.log(`Player B rolled: ${playerBRoll}`);

 	if (playerARoll > playerBRoll) {
 		console.log("Player A wins!");
 	} else if (playerBRoll > playerARoll) {
 		console.log("Player B wins!");
 	} else {
 		console.log("It's a tie!");
 	}
 }

 console.log("Standard rounds:");

 for (let i = 0; i < 10; i++) {
 	withDependencies(randomNumberGame, [DeterministicRandomService])(i);
 }

 @SubstituteFor(DeterministicRandomService)
 class MockRandomService extends DeterministicRandomService {
 	next(): number {
 		return 1;
 	}
 }

 console.log("");
 console.log(
 	"Mocked rounds, every game will be a tie with both players rolling 1:",
 );
 console.log(" ");
 for (let i = 0; i < 10; i++) {
 	withDependencies(randomNumberGame, [MockRandomService])(i);
 }
diff --git a/fun-ts---entity-array-draft.ts b/fun-ts---entity-array-draft.ts
 /**
 * Draft of a helper for creating custom typed arrays of entities. Could be very good
 * for implementing state management logic.
 */

 const standardEquality = <T>(a: T, b: T): boolean =>
 	a === b;

 type EntityHelperSuiteOptions<T, GenerateInput, FindByInput> = {
 	isEqual?: (a: T, b: T) => boolean;
 	generate: (input: GenerateInput) => T;
 	findByMatcher: (input: FindByInput, entity: T) => boolean;
 	clone?: (entity: T) => T;
 }

 type EntityHelperConstructorInput<T, GenerateInput, FindByInput> = EntityHelperSuiteOptions<T, GenerateInput, FindByInput> | EntityHelperSuite<T, GenerateInput, FindByInput>;

 class EntityHelperSuite<T, GenerateInput, FindByInput> implements EntityHelperSuiteOptions<T, GenerateInput, FindByInput> {
 	isEqual: (a: T, b: T) => boolean;
 	clone: (entity: T) => T;
 	generate: (input: GenerateInput) => T;
 	findByMatcher: (input: FindByInput, entity: T) => boolean;

 	constructor(
 		input: EntityHelperConstructorInput<T, GenerateInput, FindByInput>
 	) {
 		this.isEqual = input.isEqual ?? standardEquality;
 		this.clone = input.clone ?? structuredClone;
 		this.generate = input.generate
 		this.findByMatcher = input.findByMatcher;
 	}

 }

 type EnforceUniqueMode = 'allow' | 'prevent' | 'override' | 'throw';
 // allow: allow duplicate entities to exist
 // prevent: discard any duplicate entity that would be added
 // override: replace existing entity with the new one
 // throw: throw an error if a duplicate entity is added

 class EntityArray<T, GenerateInput, FindByInput> {
 	private helpers: EntityHelperSuite<T, GenerateInput, FindByInput>;

 	private enforceUniqueMode: EnforceUniqueMode = 'allow'; // TODO: IMPLEMENT THIS

 	constructor(
 		public items: T[],
 		helpers: EntityHelperConstructorInput<T, GenerateInput, FindByInput>
 	) {
 		this.helpers = new EntityHelperSuite<T, GenerateInput, FindByInput>(helpers);
 	}

 	// Configuration methods

 	/**
 	 * NOTE: Must consider case where duplicates already exist when
 	 * unique mode is turned on.
 	 */
 	strictUnique(
 		enforce: boolean = true
 	): this {
 		this.enforceUnique = enforce;
 		return this;
 	}

 	// Custom methods

 	clone(): EntityArray<T, GenerateInput, FindByInput> {
 		return new EntityArray<T, GenerateInput, FindByInput>(
 			this.items.map(item => this.helpers.clone(item)),
 			this.helpers
 		);
 	}


 	// Base Array Methods

 	find(
 		predicate: (item: T) => boolean
 	): T | undefined {
 		return this.items.find(predicate);
 	}

 	findBy(
 		input: FindByInput,
 	): T | undefined {
 		return this.items.find(item => this.helpers.findByMatcher(input, item));
 	}

 	filter(
 		predicate: (item: T) => boolean
 	): EntityArray<T, GenerateInput, FindByInput> {
 		return new EntityArray<T, GenerateInput, FindByInput>(
 			this.items.filter(predicate),
 			this.helpers
 		);
 	}

 	map<U>(
 		mapper: (item: T) => U
 	): U[] {
 		return this.items.map(mapper);
 	}

 	forEach(
 		callback: (item: T) => void
 	): void {
 		this.items.forEach(callback);
 	}

 	reduce<U>(
 		reducer: (accumulator: U, item: T) => U,
 		initialValue: U
 	): U {
 		return this.items.reduce(reducer, initialValue);
 	}

 	some(
 		predicate: (item: T) => boolean
 	): boolean {
 		return this.items.some(predicate);
 	}

 	every(
 		predicate: (item: T) => boolean
 	): boolean {
 		return this.items.every(predicate);
 	}

 	includes(
 		item: T
 	): boolean {
 		return this.items.some(existingItem => this.helpers.isEqual(existingItem, item));
 	}

 	includesBy(
 		input: FindByInput,
 	): boolean {
 		return this.items.some(item => this.helpers.findByMatcher(input, item));
 	}


 	push(
 		item: T
 	): number {
 		if (this.enforceU)
 			this.items.push(item);
 		return this.length;
 	}

 	pushNew(
 		input: GenerateInput
 	): T {
 		const item = this.helpers.generate(input);
 		this.push(item);
 		return item;
 	}

 	get length(): number {
 		return this.items.length;
 	}


 }

 // EXAMPLE USAGE

 type Todo = {
 	id: number;
 	title: string;
 	completed: boolean;
 }

 const todoHelpers = new EntityHelperSuite({
 	generate: (input: { title: string; completed?: boolean }): Todo => ({
 		id: Math.floor(Math.random() * 1000), // Simulating ID generation
 		completed: input.completed ?? false,
 		title: input.title
 	}),
 	isEqual: (a, b) => a.id === b.id,
 	findByMatcher: (id: number, todo) => todo.id === id,
 	clone: (todo) => ({ ...todo }),
 })

 const todoArray = new EntityArray([], todoHelpers);
diff --git a/fun-ts---immutable-deep-freeze-proto.ts b/fun-ts---immutable-deep-freeze-proto.ts
 /**
 * Prototype for a function that returns a deep frozen version of an object.
 * The passed in object itself will not be frozen, but rather a frozen copy
 * is returned.
 * 
 * The freezing is actually done by a proxy, rather than using Object.freeze 
 * directly. Nested objects are only frozen when they are accessed to reduce
 * performance overhead.
 * 
 * NOTE: You probably don't need this function, if you want to make sure a
 * developer does not mutate an object, you can just cast it as `Readonly<T>`.
 * This function is a last resort, perhaps if you are afraid an object might
 * be mutated by a third-party library, or your code might be used in JS
 * projects that won't respect the `Readonly<T>` type.
 */
 const toFrozenDeep = <T>(obj: T): Readonly<T> => {
 	if (typeof obj !== 'object' || obj === null) {
 		return Object.freeze(obj) as T;
 	}

 	const frozenChildCache = new WeakMap();

 	return new Proxy(obj, {
 		get(target, prop, receiver) {
 			const value = Reflect.get(target, prop, receiver);
 			const cachedFrozen = typeof value === 'object'
 				? frozenChildCache.get(value)
 				: undefined;
 			const frozenValue = cachedFrozen ?? toFrozenDeep(value);
 			if (typeof value === 'object' && !frozenChildCache.has(value)) {
 				frozenChildCache.set(value, frozenValue);
 			}
 			return frozenValue;
 		},
 		set: () => {
 			throw new TypeError('Cannot modify a frozen object');
 		}
 	})
 }
diff --git a/fun-ts---method-logger.ts b/fun-ts---method-logger.ts

 type LogCommandMethod = 'log' | 'info' | 'warn' | 'error' | 'debug';

 class Logger {
 	constructor(private labels: string[]) { }

 	private send(method: LogCommandMethod, ...args: any[]) {
 		console[method](`[${this.labels.join('.')}]: `, ...args);
 	}

 	log(...args: any[]) {
 		this.send('log', ...args);
 	}

 	info(...args: any[]) {
 		this.send('info', ...args);
 	}

 	warn(...args: any[]) {
 		this.send('warn', ...args);
 	}

 	error(...args: any[]) {
 		this.send('error', ...args);
 	}

 	debug(...args: any[]) {
 		this.send('debug', ...args);
 	}
 }


 type PickByValue<T, V> = {
 	[K in keyof T]: T[K] extends V ? K : never;
 };

 type PickMethods<T> = PickByValue<T, (...args: any[]) => any>;

 type MethodNames<T> = keyof PickMethods<T>;

 const methodLoggers = <T extends { constructor: { name: string } }>(target: T): Record<MethodNames<T>, Logger> =>
 	new Proxy({} as any, {
 		get: (obj, prop) => {
 			if (!(prop in obj)) {
 				const labels = [target.constructor.name, prop as string];
 				obj[prop] = new Logger(labels);
 			}
 			return obj[prop];
 		}
 	})

 // EXAMPLE USAGE

 class ExampleService {
 	private loggers = methodLoggers(this);

 	doSomething() {
 		const logger = this.loggers.doSomething;

 		logger.info('Doing something...');
 	}

 	switchItUp(someId: number) {
 		const logger = this.loggers.switchItUp;

 		logger.warn(`Switching it up for ID: ${someId}`);
 	}
 }

 const a = new ExampleService();

 a.doSomething();
 a.switchItUp(42);
diff --git a/fun-ts---observable-dom-events-draft.ts b/fun-ts---observable-dom-events-draft.ts
 /**
 * Minimal prototype for adapting HTML events to an stream/observable-like API.
 * Allows for more functional and re-usable logic in handling events.
 * TODO: 
 * - `scan` method (see simple counter example here: https://baconjs.github.io)
 * - Combine multiple emitters into one
 * - Filter events
 */

 class Observable<Payload> {
 	private listeners: ((payload: Payload) => void)[] = [];

 	private constructor(
 		private setup: (emit: (payload: Payload) => void) => void,
 		private cleanup: (emit: (payload: Payload) => void) => void 
 	) {
 		this.refresh();
 	}

 	/**
 	 * Destroy existing listeners and set up new ones. If app context changes and new
 	 * listeners need to be created (eg; more buttons are added to the DOM that need to
 	 * be listened to), this method should be called.
 	 */
 	refresh(): void {
 		this.cleanup(this.emit);
 		this.setup(this.emit);
 	}

 	/**
 	 * Listen to the observable
 	 */
 	on(listener: (payload: Payload) => void) {
 		this.listeners.push(listener);
 		return () => this.off(listener); // return callback to unsubscribe
 	}

 	/**
 	 * Stop listening to the observable
 	 */
 	off(listener: (payload: Payload) => void): void {
 		this.listeners = this.listeners.filter(l => l !== listener);
 	}

 	emit = (payload: Payload): void => {
 		// Must be an arrow function to maintain `this` context
 		this.listeners.forEach(listener => listener(payload));
 	}

 	// Builder functions

 	/**
 	 * Create an observable with no default condition to emit.
 	 * Must manually trigger `emit`
 	 */
 	static make<Payload>(): Observable<Payload> {
 		return new Observable<Payload>(
 			emit => {
 				// No setup needed
 			},
 			emit => {
 				// No cleanup needed
 			}
 		);
 	}

 	/**
 	 * Create an observable that listens to dom events on specific
 	 * elements
 	 */
 	static fromEvent<EventType extends keyof HTMLElementEventMap>(
 		selector: string,
 		eventType: EventType
 	): Observable<HTMLElementEventMap[EventType]> {
 		const emitter = new Observable<HTMLElementEventMap[EventType]>(
 			emit => {
 				document.querySelectorAll(selector).forEach(element => {
 					element.addEventListener(eventType, emit as EventListener);
 				});
 			},
 			emit => {
 				document.querySelectorAll(selector).forEach(element => {
 					element.removeEventListener(eventType, emit as EventListener);
 				});
 			}
 		);

 		return emitter;
 	}

 }


 // EXAMPLE USAGE

 const toggleModal = () => {
 	//...
 }

 const modalToggleClick = Observable.fromEvent(
 	'#modal-toggle',
 	'click'
 )

 modalToggleClick.on(() => {
 	toggleModal();
 });

 // Alternate

 // Manually connect the observerable to the event callback,
 // gives more control, useful for frontend frameworks eg;
 // React, as you can connect the observable to the elements
 // event handler props 
 const otherModalToggleClick = Observable.make<MouseEvent>();
 document.querySelector<HTMLButtonElement>('#other-modal-toggle')
 	?.addEventListener('click', otherModalToggleClick.emit);
diff --git a/fun-ts---react-state-prototype.ts b/fun-ts---react-state-prototype.ts
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /**
 * Prototype of a custom global state management system for React, using the "new"
 * `useSyncExternalStore` hook.
 * TODO:
 * - SSR support (see jotai SSR) (look into potential issue of stores being re-used for multiple requests)
 * - Action middleware (eg; logging, analytics)
 */
 import { useSyncExternalStore } from "react";

 // Utility functions, should be moved to a separate file

 export const basicEquality = <T>(a: T, b: T): boolean => a === b;

 export const memoize = <Fn extends (...args: any[]) => any>(fn: Fn): Fn => {
 	const cache: [Parameters<Fn>, ReturnType<Fn>][] = [];

 	return ((...args: Parameters<Fn>) => {
 		const cached = cache.find(
 			([cachedArgs]) =>
 				cachedArgs.length === args.length &&
 				cachedArgs.every((arg, i) => arg === args[i]),
 		);

 		if (cached) {
 			return cached[1];
 		}

 		const result = fn(...args);
 		cache.push([args, result]);
 		return result;
 	}) as unknown as Fn;
 };

 // Types

 export type StoreListenerFn<T> = (state: Readonly<T>) => void;

 export type StoreAction<Type extends string, Params extends unknown[]> = {
 	type: Type;
 	params: Params;
 	// replacing typical `payload` field with `params` array makes it MUCH easier
 	// to handle actions in a type-safe way.
 };

 export type ExtractActionByType<
 	Action extends StoreAction<string, unknown[]>,
 	Type extends string,
 > = Extract<Action, { type: Type }>;

 export type StoreActionHandlers<
 	Data,
 	Action extends StoreAction<string, unknown[]>,
 > = {
 	[T in Action["type"]]: (
 		state: Data,
 		...params: ExtractActionByType<Action, T>["params"]
 	) => Data;
 };

 export type StoreSelectorFn<Data, Selection> = (state: Data) => Selection;

 export type StoreSelectorFnBuilder<
 	Data,
 	Selection,
 	Params extends unknown[],
 > = (...params: Params) => StoreSelectorFn<Data, Selection>;

 // Store Class

 export class Store<
 	Data,
 	Action extends StoreAction<string, any[]> = never,
 	Selectors extends Record<string, StoreSelector<Data, any, any[]>> = Record<
 		string,
 		never
 	>,
 > {
 	private state: Data;

 	private listeners: StoreListenerFn<Data>[] = [];
 	private handlers: StoreActionHandlers<Data, Action> = {} as any;
 	private selectorBuilders: Selectors = {} as any;
 	private previousSelections: Map<StoreListenerFn<any>, any> = new Map();

 	constructor(state: Data) {
 		this.state = state;
 	}

 	private emit() {
 		for (const listener of this.listeners) {
 			listener(this.get());
 		}
 	}

 	// Subscription methods

 	unsubscribe(listener: StoreListenerFn<Data>) {
 		this.listeners = this.listeners.filter((l) => l !== listener);
 	}

 	subscribe(listener: StoreListenerFn<Data>): () => void {
 		this.listeners.push(listener);
 		listener(this.state);
 		return () => {
 			this.listeners = this.listeners.filter((l) => l !== listener);
 		};
 	}

 	subscribeSelect<Selection>(
 		selector: (state: Data) => Selection,
 		selectionListener: (selection: Selection) => void,
 		equality: (a: Selection, b: Selection) => boolean = basicEquality,
 	) {
 		const fullListener: StoreListenerFn<Data> = (state) => {
 			const currentSelection = selector(state);

 			const selectionHasChanged =
 				!this.previousSelections.has(selectionListener) ||
 				!equality(
 					this.previousSelections.get(selectionListener),
 					currentSelection,
 				);

 			if (selectionHasChanged) {
 				selectionListener(currentSelection);
 				this.previousSelections.set(selectionListener, currentSelection);
 			}
 		};

 		return this.subscribe(fullListener);
 	}

 	// State management methods

 	private set(newState: Data): void {
 		this.state = newState;
 		this.emit();
 	}

 	get(): Readonly<Data> {
 		return this.state as Readonly<Data>;
 	}

 	// Actions

 	private handleAction(action: Action): void {
 		const handler = this.handlers[action.type as Action["type"]];
 		if (!handler) throw new Error(`No handler for action type: ${action.type}`);

 		const newState = handler(this.state, ...action.params);
 		this.set(newState);
 	}

 	addAction<Type extends string, Params extends unknown[]>(
 		type: Type,
 		handler: (state: Data, ...params: Params) => Data,
 	): Store<Data, Action | StoreAction<Type, Params>> {
 		(this.handlers as any)[type] = handler;
 		return this as any;
 	}

 	dispatch<Type extends Action["type"]>(
 		type: Type,
 		...params: ExtractActionByType<Action, Type>["params"]
 	): void {
 		const action = {
 			type,
 			params,
 		};

 		this.handleAction(action as never as Action);
 	}

 	// Selectors

 	select<Selection>(selector: (state: Data) => Selection): Readonly<Selection> {
 		return selector(this.get()) as Readonly<Selection>;
 	}

 	composeSelectorBuilder<Selection, Params extends unknown[]>(
 		selectorWithState: (state: Data, ...params: Params) => Selection,
 	): (...params: Params) => StoreSelectorFn<Data, Selection> {
 		// For optimization, we cache selector functions, so we only ever create
 		// a single selector function for each unique set of parameters.

 		return memoize(
 			(...params: Params) =>
 				(state: Data) =>
 					selectorWithState(state, ...params),
 		);
 	}

 	addSelector<Key extends string, Params extends unknown[], Selection>(
 		key: Key,
 		selectorWithState: (state: Data, ...params: Params) => Selection,
 		equality?: (a: Selection, b: Selection) => boolean,
 	): Store<
 		Data,
 		Action,
 		Selectors & Record<Key, StoreSelector<Data, Selection, Params>>
 	> {
 		const selector = new StoreSelector(this, selectorWithState, equality);

 		(this.selectorBuilders as any)[key] = selector;
 		return this as any;
 	}

 	get selectors(): Selectors {
 		return this.selectorBuilders;
 	}
 }

 // Selectors

 /**
 * Selectors exist as their own class so they can encapsulate equality
 * and memoization logic. They also contain a reference to the underlying
 * store, so they can be passed directly into `useStoreSelector` hook
 * without the need to pass the store separately.
 */
 class StoreSelector<Data, Selection, Params extends unknown[] = []> {
 	store: Store<Data, any, any>;

 	selectorBuilder: StoreSelectorFnBuilder<Data, Selection, Params>;
 	equality: (a: Selection, b: Selection) => boolean;

 	constructor(
 		store: Store<Data, any, any>,
 		selectorWithState: (state: Data, ...params: Params) => Selection,
 		equality: (a: Selection, b: Selection) => boolean = basicEquality,
 	) {
 		this.store = store;
 		this.selectorBuilder = store.composeSelectorBuilder(selectorWithState);
 		this.equality = equality;
 	}
 }

 export type InferStoreSelectorSelection<
 	TheSelector extends StoreSelector<any, any, any[]>,
 > = TheSelector extends StoreSelector<any, infer Selection, any[]>
 	? Selection
 	: never;

 export type InferStoreSelectorParams<
 	TheSelector extends StoreSelector<any, any, any[]>,
 > = TheSelector extends StoreSelector<any, any, infer Params> ? Params : never;

 // Hooks

 export const useStore = <T>(store: Store<T, never>): Readonly<T> =>
 	useSyncExternalStore(
 		(listener) => store.subscribe(listener),
 		() => store.get(),
 		() => store.get(),
 	);

 export const useStoreSelector = <
 	TheSelector extends StoreSelector<any, any, any[]>,
 >(
 	selector: TheSelector,
 	...params: InferStoreSelectorParams<TheSelector>
 ): Readonly<InferStoreSelectorSelection<TheSelector>> => {
 	const selectorFn = selector.selectorBuilder(...params);
 	return useSyncExternalStore(
 		(listener) =>
 			selector.store.subscribeSelect(selectorFn, listener, selector.equality),
 		() => selector.store.select(selectorFn),
 		() => selector.store.select(selectorFn),
 	);
 };

 // EXAMPLE USAGE

 type Todo = {
 	id: string;
 	text: string;
 	completed: boolean;
 };

 const todoStore = new Store<Todo[]>([])
 	// actions
 	.addAction("addTodo", (todos, text: string, completed: boolean) => [
 		...todos,
 		{ id: crypto.randomUUID(), text, completed },
 	])
 	.addAction("deleteTodo", (todos, id: string) =>
 		todos.filter((todo) => todo.id !== id),
 	)
 	.addAction("toggleTodo", (todos, id: string) =>
 		todos.map((todo) =>
 			todo.id === id ? { ...todo, completed: !todo.completed } : todo,
 		),
 	)
 	.addAction("clearTodos", () => [])
 	// selectors
 	.addSelector("first", (todos) => todos[0])
 	.addSelector("id", (todos, id: string) =>
 		todos.find((todo) => todo.id === id),
 	)
 	.addSelector("completed", (todos) => todos.filter((todo) => todo.completed))
 	.addSelector("between", (todos, start: number, end: number) =>
 		todos.slice(start, end),
 	);

 todoStore.dispatch("addTodo", "Learn TypeScript", false);
 todoStore.dispatch("addTodo", "Build a React app", false);
 todoStore.dispatch("clearTodos");

 const useA = () => {
 	const todos = useStore(todoStore);
 	const firstTodo = useStoreSelector(todoStore.selectors.first);
 	const specificTodo = useStoreSelector(todoStore.selectors.id, "some-id");
 	const completedTodos = useStoreSelector(todoStore.selectors.completed);
 	const firstFiveTodos = useStoreSelector(todoStore.selectors.between, 0, 5);
 };

 // RECIPE EXAMPLE

 /**
 * Example of creating a store "recipe", which lets us create multiple stores
 * that follow similar patterns. In this example we will create a recipe for
 * managing modals that contain the UI for editing or creating entities.
 */

 type EntityEditModalState =
 	| {
 			mode: "closed" | "new";
 	  }
 	| {
 			mode: "edit";
 			entityId: string;
 	  };

 const composeEntityEditModalStore = () =>
 	new Store<EntityEditModalState>({ mode: "closed" })
 		// Actions
 		.addAction("openNew", () => ({ mode: "new" }))
 		.addAction("openEdit", (_, entityId: string) => ({
 			mode: "edit",
 			entityId,
 		}))
 		.addAction("close", () => ({ mode: "closed" }))
 		// Selectors
 		.addSelector("isOpen", (state) => state.mode !== "closed")
 		.addSelector("entityId", (state): string | undefined => {
 			if (state.mode !== "edit") return undefined;
 			return state.entityId;
 		});

 const todoEditModalStore = composeEntityEditModalStore();

 const EditTodoModal = () => {
 	const isOpen = useStoreSelector(todoEditModalStore.selectors.isOpen);
 	const editTodoId = useStoreSelector(todoEditModalStore.selectors.entityId);
 };
diff --git a/fun-ts---reducer-state-draft.ts b/fun-ts---reducer-state-draft.ts
 type ReducerAction<Type extends string> = {
 	type: Type;
 };

 type ReducerPayloadAction<Type extends string, Payload> = ReducerAction<Type> & {
 	payload: Payload;
 };

 type Reducer<S, A> = (state: S, action: A) => S;

 class ReducerBuilder<State, Action extends ReducerAction<any> | ReducerPayloadAction<any, any> = never> {
 	private handlers: Record<string, (state: State, payload?: any) => State> = {};

 	simpleCase = <Type extends string>(
 		type: Type,
 		handler: (state: State) => State
 	): ReducerBuilder<State, Action | ReducerAction<Type>> => {
 		this.handlers[type] = (state) => handler(state);
 		return this as any;
 	};

 	payloadCase = <Type extends string>(
 		type: Type
 	) => <Payload>(handler: (state: State, payload: Payload) => State): ReducerBuilder<State, Action | ReducerPayloadAction<Type, Payload>> => {
 		this.handlers[type] = handler;
 		return this as any;
 	};

 	reducer = (): Reducer<State, Action> => (state, action) => {
 		const handler = this.handlers[action.type];
 		if (handler) {
 			if ("payload" in action) {
 				return handler(state, action.payload);
 			} else {
 				return handler(state);
 			}
 		}
 		return state;
 	}
 }

 // EXAMPLE

 type ModalState = {
 	mode: "closed";
 } | {
 	mode: "open-new";

 } |
 {
 	mode: "open-edit";
 	id: string;
 }

 const reducer = new ReducerBuilder<ModalState>()
 	.simpleCase('closeModal', () => ({ mode: 'closed' }))
 	.simpleCase('openNewModal', () => ({ mode: 'open-new' }))
 	.payloadCase('openEditModal')((state, payload: { id: string }) => ({
 		mode: 'open-edit',
 		id: payload.id,
 	}))
 	.reducer();

 reducer({ mode: 'closed' }, { type: 'openNewModal' }); // { mode: 'open-new' }

 // Custom jotai helper prototype
 // Needs adjustment to minimize amount of manual generic passing
 const createAtom = <State, Action extends ReducerAction<any> | ReducerPayloadAction<any, any> = never>(
 	initialState: State,
 	reducerBuilder: ReducerBuilder<State, Action>
 ): [State, (action: Action) => void] => {
 	const reducer = reducerBuilder.reducer();

 	return [
 		initialState,
 		(action: Action) => {
 			const newState = reducer(initialState, action);
 			// Here you would typically set the new state in your state management system
 			// For example, if using Jotai, you would use setAtom(newState);
 			console.log('New State:', newState);
 		}
 	]
 }

 const initialState: ModalState = { mode: 'closed' };

 createAtom(initialState, new ReducerBuilder<ModalState>()
 	.simpleCase('closeModal', () => ({ mode: 'closed' }))
 	.simpleCase('openNewModal', () => ({ mode: 'open-new' }))
 	.payloadCase('openEditModal')((state, payload: { id: string }) => ({
 		mode: 'open-edit',
 		id: payload.id,
 	}))
 )
diff --git a/fun-ts---service-logger.ts b/fun-ts---service-logger.ts

 type LogCommandMethod = 'log' | 'info' | 'warn' | 'error' | 'debug';

 class Logger {
 	constructor(private labels: string[]) { }

 	private send(method: LogCommandMethod, ...args: any[]) {
 		console[method](`[${this.labels.join('.')}]: `, ...args);
 	}

 	log(...args: any[]) {
 		this.send('log', ...args);
 	}

 	info(...args: any[]) {
 		this.send('info', ...args);
 	}

 	warn(...args: any[]) {
 		this.send('warn', ...args);
 	}

 	error(...args: any[]) {
 		this.send('error', ...args);
 	}

 	debug(...args: any[]) {
 		this.send('debug', ...args);
 	}
 }


 type PickByValue<T, V> = {
 	[K in keyof T]: T[K] extends V ? K : never;
 };

 type PickMethods<T> = PickByValue<T, (...args: any[]) => any>;

 type MethodNames<T> = keyof PickMethods<T>;

 const methodLoggers = <T extends { constructor: { name: string } }>(target: T): Record<MethodNames<T>, Logger> =>
 	new Proxy({} as any, {
 		get: (obj, prop) => {
 			if (!(prop in obj)) {
 				const labels = [target.constructor.name, prop as string];
 				obj[prop] = new Logger(labels);
 			}
 			return obj[prop];
 		}
 	})

 // EXAMPLE USAGE

 class ExampleService {
 	private loggers = methodLoggers(this);

 	doSomething() {
 		const logger = this.loggers.doSomething;

 		logger.info('Doing something...');
 	}

 	switchItUp(someId: number) {
 		const logger = this.loggers.switchItUp;

 		logger.warn(`Switching it up for ID: ${someId}`);
 	}
 }

 const a = new ExampleService();

 a.doSomething();
 a.switchItUp(42);
diff --git a/fun-ts---signals-challenge.ts b/fun-ts---signals-challenge.ts

 /**
 * Fun challenge to see if I can implement the signals pattern
 * proposed in https://github.com/tc39/proposal-signals
 */

 /**
 * Flaws of this implementation:
 * - Signal listeners are needlessly executed multiple times in some cases
 * - State signals are only tracked as dependencies if they are read
 * during the first computation of a computed signal. This will lead to
 * issues if a computed signal conditionally reads from a signal and does
 * not read it the first time.
 */

 type SignalListener<T> = (value: T) => void;

 abstract class Signal<T> {
 	protected static observer: Signal<any> | undefined = undefined;
 	// tracks the current ComputedSignal that is being evaluated
 	// so any dependencies can be registered

 	protected listeners: SignalListener<T>[] = [];

 	private constructor() {
 	}

 	/**
 	 * Add a listener that is called whenever the signal's value changes
 	 */
 	add(callback: SignalListener<T>) {
 		this.listeners.push(callback);
 	}

 	/**
 	 * Remove a previously added listener
 	 */
 	remove(callback: SignalListener<T>) {
 		this.listeners = this.listeners.filter(listener => listener !== callback);
 	}

 	protected notify(value: T) {
 		this.listeners.forEach(listener => listener(value));
 	}

 	abstract get(): T;

 	protected registerWithCurrentObserver() {
 		if (
 			!Signal.observer ||
 			!(Signal.observer instanceof ComputedSignal)
 		) return;

 		Signal.observer._dependencies.push(this);
 	}


 	protected static electObserver(newObserver: Signal<any>) {
 		// IMPORTANT: This is a naive implementation that could lead to deadlocks,
 		// as it holds the main thread waiting for the observer to be released, if
 		// the observer release takes time, it will block the whole application.
 		while (!!Signal.observer) {
 			// wait for the observer to become available
 		}
 		this.observer = newObserver;
 		return;
 	}

 	/**
 	 * As per the proposal, signals are created with `new Signal.State()` and `Signal.Computed()`,
 	 * so we just return the corresponding class prototypes via static getters.
 	 */
 	static get State() {
 		return StateSignal;
 	}

 	static get Computed() {
 		return ComputedSignal;
 	}

 }

 class StateSignal<T> extends Signal<T> implements Signal<T> {

 	constructor(
 		private value: T
 	) {
 		super();
 	}

 	get() {
 		this.registerWithCurrentObserver();
 		// if this signal is read as part of a computed signal's computation,
 		// we register it as a dependency of that computed signal

 		return this.value;
 	}

 	set(value: T) {
 		// NOTE: Relies on reference equality for objects, so if you set
 		// a signal to a new object, mutate that object, then set it again,
 		// no change will be detected. I personally think this is fine, and
 		// that having a rule of no object mutation is a good and reasonable
 		// compromise to make. 
 		// If we support that kind of mutation detection, then users may also
 		// expect signals to automatically detect when it's object is mutated,
 		// rather than only when set() is called, and that would completely 
 		// blow up the complexity of this implementation.
 		if (value === this.value) return;
 		this.value = value;
 		this.notify(value);
 	}
 }

 class ComputedSignal<T> extends Signal<T> implements Signal<T> {
 	_dependencies: Signal<any>[] = []; // would ideally be private but can't be with this implementation
 	// could potentially store dependencies on a protected static Map on parent Signal class,
 	// keyed by the ComputedSignal instance

 	// We store the callbacks so we can later remove them
 	private dependencyCallbacks: WeakMap<Signal<any>, SignalListener<T>> = new WeakMap();

 	private mustRecompute = true;

 	private cachedValue: T;

 	constructor(
 		private compute: () => T,
 	) {
 		super();

 		this.cachedValue = this.get();
 	}


 	get() {
 		try {

 			this.registerWithCurrentObserver();
 			// if being read as part of another computed signal's computation,
 			// register as a dependency

 			if (!this.mustRecompute) return this.cachedValue;

 			Signal.electObserver(this); // set self as current observer to track dependencies

 			// untrack dependencies from previous evaluation
 			this._dependencies.forEach(dependency => {
 				const callback = this.dependencyCallbacks.get(dependency);
 				if (!callback) return;
 				dependency.remove(callback);
 				this.dependencyCallbacks.delete(dependency);
 			});
 			this._dependencies = [];
 			this.cachedValue = this.compute();
 			Signal.observer = undefined; // release self as observer

 			// Notify on dependency change
 			this._dependencies.forEach(dependency => {
 				const callback = () => {
 					// If a dependency changes, then we next read of this computed signal
 					// must recompute its value
 					this.mustRecompute = true;
 					this.notify(this.get());
 					// ^this line might be the cause of the duplicate evaluations, shouldn't we be
 					// notifying once the computation is done? Not at the same time we mark for recompute?
 				}
 				this.dependencyCallbacks.set(dependency, callback);
 				dependency.add(callback);
 			});

 			this.mustRecompute = false;

 			return this.cachedValue;
 		} finally {
 			// If there is an error between electing self as observer and
 			// releasing, we ensure we still release the observer
 			if (Signal.observer === this) {
 				Signal.observer = undefined;
 			}
 		}

 	}
 }

 // --- TEST CODE ---

 // EXTRA CHALLENGE: Account for some dependencies not being read
 // in initial computation of a computed signal

 // TESTS:
 // - Basic state signal reaction
 // - Computed signal with state signal dependency
 // - Computed signal with computed signal dependency
 // - Computed signal with multiple dependencies

 const toggle = new Signal.State(false);

 const counter = new Signal.State(1);

 const doubled = new Signal.Computed(() => counter.get() * 2);
 const labelled = new Signal.Computed(() =>
 	`Counter: ${counter.get()}`);

 const isEvenMessage = new Signal.State("Counter is even");

 const conditionalDependency = new Signal.Computed(() => {
 	const counterIsOdd = counter.get() % 2 === 1;
 	if (counterIsOdd) return `Odd Counter ${counter.get()}`;

 	// `isEvenMessage` should not become a dependency after the first read
 	// because it is not read in the first evaluation when counter is 1 (odd)
 	return isEvenMessage.get();
 });

 conditionalDependency.add((value) => {
 	console.log('[conditionalDependency] Conditional dependency changed:', value);
 });

 toggle.add((value) => {
 	console.log('[toggle] Toggle changed:', value);
 });
 counter.add((value) => {
 	console.log('[counter] Counter changed:', value);
 })

 labelled.add((value) => {
 	console.log('[labelled] Labelled changed:', value);
 });

 console.log('🍎 Initial values: ', {
 	counter: counter.get(),
 	toggle: toggle.get(),
 	conditionalDependency: conditionalDependency.get(),
 	computed: {
 		doubled: doubled.get(),
 		labelled: labelled.get(),
 	}
 })

 console.log('🍎 Updating `isEvenMessage`, `conditionalDependency` updates should not trigger since counter is odd')
 isEvenMessage.set("Counter is super even!!");
 // isEvenMessage.set("Counter is SUPER SUPER even!!");

 console.log('🍎 Changing counter to even and updating `isEventCounterMessage`, this should trigger `conditionalDependency` listeners');
 counter.set(2);
 isEvenMessage.set("Even.");

 // toggle.set(false);

diff --git a/fun-ts---theory-express-schema-validation.md b/fun-ts---theory-express-schema-validation.md
diff --git a/fun-ts---trpc-optimisitc-updates-helper-draft.ts b/fun-ts---trpc-optimisitc-updates-helper-draft.ts
 import type { UseTRPCMutationOptions } from '@trpc/react-query/shared';

 type InferUseTRPCMutationOptionsInput<T extends UseTRPCMutationOptions<any, any, any>> =
  T extends UseTRPCMutationOptions<infer Input, any, any> ? Input : never;

 type InferUseTRPCMutationOptionsError<T extends UseTRPCMutationOptions<any, any, any>> =
  T extends UseTRPCMutationOptions<any, infer Error, any> ? Error : never;

 type InferUseTRPCMutationOptionsOutput<T extends UseTRPCMutationOptions<any, any, any>> =
  T extends UseTRPCMutationOptions<any, any, infer Output> ? Output : never;

 type TrpcOptimisticUpdateCallbacks<T extends UseTRPCMutationOptions<any, any, any>, OptimisticResult> = {
  /**
   * As soon as the mutation is called, perform an optimistic update.
   * If any extra data or context is generated during the optimistic update,
   * it should be returned by the callback so it can be be used later in
   * `reconcile` and `rollback` callbacks.
   */
  optimisticUpdate: (input: InferUseTRPCMutationOptionsInput<T>) => OptimisticResult;
  /**
   * Reconcile the optimistic update with the data returned from the server.
   */
  reconcile: (
    responseData: InferUseTRPCMutationOptionsOutput<T>,
    optimisticResult: OptimisticResult,
    input: InferUseTRPCMutationOptionsInput<T>
  ) => void;
  /**
   * Rollback the optimistic update in case of an error.
   */
  rollback: (
    error: InferUseTRPCMutationOptionsError<T>,
    optimisticResult: OptimisticResult,
    input: InferUseTRPCMutationOptionsInput<T>
  ) => void;
 };

 const NOT_SET = Symbol('NOT_SET');

 /**
 * Wrap trpc mutation options object, providing logic for optimistic updates.
 */
 const trpcOptimisticUpdateOptions = <T extends UseTRPCMutationOptions<any, any, any>, OptimisticResult>(
  options: T,
  callbacks: TrpcOptimisticUpdateCallbacks<T, OptimisticResult>
 ): T => {
  let optimisticResult: OptimisticResult | typeof NOT_SET = NOT_SET;

  return {
    ...options,
    onMutate: (input, ...remainingParams) => {
      try {
        optimisticResult = callbacks.optimisticUpdate(input);
      } finally {
        return options.onMutate?.(input, ...remainingParams);
      }
    },
    onSuccess: (result, input, context) => {
      try {
        if (optimisticResult === NOT_SET) {
          throw new Error('Optimistic result was not set, this should be unreachable');
        }

        callbacks.reconcile(result, optimisticResult, input);
      } finally {
        return options.onSuccess?.(result, input, context);
      }
    },
    onError: (error, input, context) => {
      try {
        if (optimisticResult === NOT_SET) {
          throw new Error('Optimistic result was not set, this should be unreachable');
        }

        callbacks.rollback(error, optimisticResult, input);
      } finally {
        return options.onError?.(error, input, context);
      }
    }
  };
 };
diff --git a/fun-ts---ts-result-draft.ts b/fun-ts---ts-result-draft.ts

 /**
 * TODO:
 * - Fix static Result async methods handling multiple possible errors
 * - Serialization and deserialization of Result instances
 */

 // GENERIC UTILS

 type AnyClassPrototype = new (...args: any[]) => any;

 type ValueOf<T> = T extends (infer U)[] ? U : T[keyof T];

 const instanceOfAny = <const ClassArr extends AnyClassPrototype[]>(
 	value: unknown,
 	classes: ClassArr
 ): value is InstanceType<ValueOf<ClassArr>> => {
 	return classes.some(cls => value instanceof cls);
 }
 	

 // BRANCH TYPES


 class Ok<T> {
 	constructor(
 		public value: T
 	) {

 	}
 }

 class Err<E> {
 	constructor(
 		public error: E
 	) {

 	}

 	/**
 	 * Create a parser function that takes a value, if that value is 
 	 * an instance of any of the provided classes, then it is returned,
 	 * otherwise an error is thrown.
 	 * 
 	 * This can be used with `Result.fromThrowable`, you can define your
 	 * own error classes to represent the different possible errors a function
 	 * can throw, and then use this function to create a parser and pass
 	 * it into `fromThrowable`
 	 */
 	static instanceParser<const ClassArr extends AnyClassPrototype[]>(
 		classes: ClassArr
 	): (err: unknown) => InstanceType<ValueOf<ClassArr>> {
 		return (err) => {
 			if (!instanceOfAny(err, classes)) {
 				throw new TypeError(`Expected error to be an instance of one of ${classes.map(c => c.name).join(', ')}`);
 			}
 			return err;
 		}
 	}

 }

 // RESULT

 // Represents the types created by `Result.ok` and `Result.err`
 type MinResult<T, E> = Result<T, never> | Result<never, E>;


 type InferResultOk<R extends Result<any,any>> = R extends Result<infer T, any> ? T : never;
 type InferResultErr<R extends Result<any,any>> = R extends Result<any, infer E> ? E : never;

 type FlattenMinResult<R extends MinResult<any, any>> =
 	Result<InferResultOk<R>, InferResultErr<R>>;


 export class Result<T, E> {
 	private constructor(
 		private content: Ok<T> | Err<E>,
 	) {

 	}

 	// Map

 	map<const Ta>(fn: (value: T) => Ta): Result<Ta, E> {
 		if (this.content instanceof Err) {
 			return new Result<Ta, E>(this.content)
 		}

 		const newValue = fn(this.content.value)
 		return new Result<Ta, E>(new Ok(newValue))
 	}

 	async mapAsync<const Ta>(fn: (value: T) => Promise<Ta>): Promise<Result<Ta,E>> {
 		if (this.content instanceof Err) {
 			return new Result(this.content)
 		}
 		const nextValue = await fn(this.content.value);
 		return Result.ok(nextValue);
 	}

 	// FlatMap

 	flatMap<const Ta, const Ea>(fn: (value: T) => Result<Ta, Ea>): Result<Ta, E | Ea> {
 		if (this.content instanceof Err) {
 			return new Result<Ta, E | Ea>(this.content)
 		}

 		const newResult = fn(this.content.value);
 		return newResult;
 	}

 	async flatMapAsync<const Ta, const Ea>(
 		fn: (value: T) => Promise<Result<Ta, Ea>>
 	): Promise<Result<Ta, E | Ea>> {
 		if (this.content instanceof Err) {
 			return new Result(this.content)
 		}

 		const newResult = await fn(this.content.value);
 		return newResult;
 	}

 	// mapErr

 	mapErr<const Ea>(fn: (error: E) => Ea): Result<T, Ea> {
 		if (this.content instanceof Ok) {
 			return new Result<T, Ea>(this.content);
 		}
 		const newError = fn(this.content.error);
 		return Result.err(newError);
 	}

 	async mapErrAsync<const Ea>(fn: (error: E) => Promise<Ea>): Promise<Result<T, Ea>> {
 		if (this.content instanceof Ok) {
 			return new Result<T, Ea>(this.content);
 		}
 		const newError = await fn(this.content.error);
 		return Result.err(newError);
 	}

 	// flatMapErr

 	flatMapErr<const Ea>(fn: (error: E) => Result<T, Ea>): Result<T, Ea> {
 		if (this.content instanceof Ok) {
 			return new Result<T, Ea>(this.content);
 		}
 		const newResult = fn(this.content.error);
 		return newResult;
 	}

 	async flatMapErrAsync<const Ea>(
 		fn: (error: E) => Promise<Result<T, Ea>>
 	): Promise<Result<T, Ea>> {
 		if (this.content instanceof Ok) {
 			return new Result<T, Ea>(this.content);
 		}
 		const newResult = await fn(this.content.error);
 		return newResult;
 	}

 	// Misc methods

 	match<Tr, Er>(
 		okHandler: (value: T) => Tr,
 		errHandler: (value: E) => Er,
 	): Tr | Er {
 		if (this.content instanceof Err) {
 			return errHandler(this.content.error)
 		}
 		return okHandler(this.content.value)
 	}

 	// Utility create methods

 	static ok<const T>(value: T): Result<T, never> {
 		return new Result(new Ok(value));
 	}

 	static err<const E>(error: E): Result<never, E> {
 		return new Result(new Err(error));
 	}

 	// Run a callback that returns a Result created by either
 	// `Result.ok` or `Result.err` and combine the outputs into
 	// a single Result.
 	static attempt<Res extends MinResult<any,any>>(fn: () => Res): Result<InferResultOk<Res>, InferResultErr<Res>> {
 		// Weird typing is to allow it to handle multiple types of results
 		return fn();
 	}

 	static attemptAsync<Res extends MinResult<any,any>>(fn: () => Promise<Res>): Promise<Result<InferResultOk<Res>, InferResultErr<Res>>> {
 		return fn()
 	}

 	// Create a function that returns a result.
 	static fn<Params extends any[], T, E>(theFn: (...args: Params) => MinResult<T, E>): (...args: Params) => Result<T, E> {
 		return (...args: Params) =>
 			theFn(...args);
 	}

 	static asyncFn<Params extends any[], T, E>(
 		theFn: (...args: Params) => Promise<MinResult<T, E>>
 	): (...args: Params) => Promise<Result<T, E>> {
 		return async (...args: Params) => {
 			const result = await theFn(...args);
 			return result;
 		}
 	}

 	static fromThrowable<const T, const E>(
 		fn: () => T,
 		getErr: (err: unknown) => E
 	): Result<T, E> {
 		try {
 			const value = fn();
 			return Result.ok(value);
 		} catch (err) {
 			const errValue = getErr(err);
 			return Result.err(errValue);
 		}
 	}

 	/**
 	 * If you have an object that could represent either a success or an error,
 	 * you can use this method to parse it into a Result.
 	 * Provide a function that parses a success value and another that parses an error value.
 	 * This is useful when dealing with APIs or other data sources where the response
 	 * can be ambiguous or when you want to handle both success and error cases uniformly.
 	 */
 	static parse<const T, const E>(
 		value: unknown,
 		okParser: (value: unknown) => T,
 		errParser: (value: unknown) => E
 	): Result<T, E> {
 		try {
 			const okValue = okParser(value);
 			return Result.ok(okValue);
 		} catch (err) {
 			const errValue = errParser(err);
 			return Result.err(errValue);
 		}
 	}

 }

 // EXAMPLE USAGE

 const fiftyFifty = Result.attempt(() => {
 	const isGood = Math.random() > 0.5;
 	return isGood
 		? Result.ok("good")
 		: Result.err("bad")
 })

 const divideBy = Result.fn((a: number, b: number) => {
 	if (b === 0) {
 		return Result.err("Cannot divide by zero");
 	}
 	return Result.ok(a / b);
 })

 const wa = Result.fromThrowable(() => {
 	if (Math.random() > 0.5) {
 		throw new Error("Random error occurred");
 	}
 	return "Success!" as const;
 }, () => "Failure!" as const)

 class FailedChanceError extends Error {
 	a = "asfsaf"
 	constructor() {
 		super("You failed")
 	}
 }

 class FailedChanceBadlyError extends Error {
 	b = "askjfasf"
 	constructor() {
 		super("You failed really badly")
 	}
 }

 const otherFiftyFifty = Result.fromThrowable(() => {
 	const roll = Math.random()
 	if (roll > 0.5) {
 		return "good"
 	} 
 	if (roll < 0.5 && roll > 0.25) {
 		throw new FailedChanceError()
 	}
 	throw new FailedChanceBadlyError();
 }, Err.instanceParser([FailedChanceError, FailedChanceBadlyError]));

 const betterOtherFiftyFifthy = Result.attempt(() => {
 	const roll = Math.random()
 	if (roll < 0.25) return Result.err(new FailedChanceBadlyError())
 	if (roll < 0.5) return Result.err(new FailedChanceError())
 	return Result.ok("good")
 })

 type ServerFnSuccess = {
 	status: "success";
 	data: number;
 }

 // Example of how you might use this with server actions or API responses

 const parseServerFnSuccess = (response: unknown): ServerFnSuccess => {
 	return {
 		status: "success",
 		data: 42 // Example data, replace with actual parsing logic
 	}
 }

 type ServerFnError = {
 	status: "error";
 	message: string;
 }

 const parseServerFnError = (error: unknown): ServerFnError => {
 	return {
 		status: "error",
 		message: "An error occurred" // Example error message, replace with actual parsing logic
 	}
 }

 const serverFnResponse = {} as ServerFnSuccess | ServerFnError;

 const serverFnResult = Result.parse(
 	serverFnResponse,
 	parseServerFnSuccess,
 	parseServerFnError
 )
diff --git a/fun-ts---ts-types-math.ts b/fun-ts---ts-types-math.ts
 /**
 * Implementation of all basic math operations in typescript
 * types.
 * 
 * Numbers are represented as tuples of digits
 */

 type Zero = 0;
 type One = 1;
 type Two = 2;
 type Three = 3;
 type Four = 4;
 type Five = 5;
 type Six = 6;
 type Seven = 7;
 type Eight = 8;
 type Nine = 9;

 type Digit =
  | Zero
  | One
  | Two
  | Three
  | Four
  | Five
  | Six
  | Seven
  | Eight
  | Nine;

 type IncrementDigit<T extends Digit> = T extends Zero
  ? One
  : T extends One
    ? Two
    : T extends Two
      ? Three
      : T extends Three
        ? Four
        : T extends Four
          ? Five
          : T extends Five
            ? Six
            : T extends Six
              ? Seven
              : T extends Seven
                ? Eight
                : T extends Eight
                  ? Nine
                  : never;

 type DecrementDigit<T extends Digit> = T extends Nine
  ? Eight
  : T extends Eight
    ? Seven
    : T extends Seven
      ? Six
      : T extends Six
        ? Five
        : T extends Five
          ? Four
          : T extends Four
            ? Three
            : T extends Three
              ? Two
              : T extends Two
                ? One
                : T extends One
                  ? Zero
                  : never;

 type TrimLeadingZeros<T extends Digit[]> = T extends [Zero]
  ? [Zero]
  : T extends [Zero, ...infer Rest extends Digit[]]
    ? TrimLeadingZeros<Rest>
    : T;

 type Increment<T extends Digit[]> = T extends [
  ...infer Rest extends Digit[],
  infer Last extends Digit,
 ]
  ? Last extends Nine
    ? [...(Rest extends [] ? [One] : Increment<Rest>), Zero]
    : [...Rest, IncrementDigit<Last>]
  : never;

 type Decrement<T extends Digit[]> = T extends [
  ...infer Rest extends Digit[],
  infer Last extends Digit,
 ]
  ? TrimLeadingZeros<
      Last extends Zero
        ? Rest extends []
          ? []
          : [...Decrement<Rest>, Nine]
        : [...Rest, DecrementDigit<Last>]
    >
  : never;

 type Add<L extends Digit[], R extends Digit[]> = R extends [Zero]
  ? L
  : Add<Increment<L>, Decrement<R>>;

 type Sub<L extends Digit[], R extends Digit[]> = R extends [Zero]
  ? L
  : Sub<Decrement<L>, Decrement<R>>;

 type Mult<
  L extends Digit[],
  R extends Digit[],
  Result extends Digit[] = [Zero],
 > = R extends [Zero] ? Result : Mult<L, Decrement<R>, Add<L, Result>>;

 type Div<
  L extends Digit[],
  R extends Digit[],
  Result extends Digit[] = [Zero],
 > = L extends [Zero] ? Result : Div<Sub<L, R>, R, Increment<Result>>;

 type Pow<
  L extends Digit[],
  R extends Digit[],
  Result extends Digit[] = L,
 > = R extends [Zero]
  ? [One]
  : R extends [One]
    ? Result
    : Pow<L, Decrement<R>, Mult<Result, L>>;

 // TESTING

 type ASeven = Add<[3], [4]>;

 type AHundred = Add<[7, 3], [2, 7]>;

 type SThree = Sub<[5], [2]>;

 type SNineSeven = Sub<[1, 0, 0], [3]>;

 type MEight = Mult<[4], [2]>;

 type MFiveHundred = Mult<[5], [1, 0, 0]>;

 type DFive = Div<[1, 0], [2]>;

 type MZero = Mult<[0], [2, 5, 6]>;

 type PFour = Pow<[2], [2]>;
 type PEight = Pow<[2], [3]>;
 type PSixteen = Pow<[2], [4]>;

 type PBig = Pow<[4], [5]>;
diff --git a/fun-ts---type-safe-decode-formdata.ts b/fun-ts---type-safe-decode-formdata.ts
 /**
 * This is a prototype that combines `zod` with `decode-formdata` to create
 * a type-safe way to decode `FormData` into regular objects with proper types.
 * Inferrence will make sure that you provide the exact right configuration for
 * the decoder based on the schema you provide.
 */

 import { decode } from "decode-formdata";
 import { type Simplify } from "type-fest";
 import z from "zod";

 type ValueOf<T> = T[keyof T];

 type JoinPath<A extends string, B extends string> = A extends ""
 	? B
 	: B extends ""
 	? A
 	: `${A}.${B}`;

 type InternalObjectPath<
 	T extends Record<string, any> | readonly any[],
 	Current extends string = "",
 > = T extends readonly (infer Elem)[]
 	? Elem extends Date
 		? JoinPath<Current, "$">
 		: Elem extends Blob
 		? JoinPath<Current, "$">
 		: Elem extends Record<string, any> | readonly any[]
 		? InternalObjectPath<Elem, JoinPath<Current, "$">> | JoinPath<Current, "$">
 		: JoinPath<Current, "$">
 	: ValueOf<{
 			[K in keyof T]: T[K] extends readonly (infer ArrayItem)[]
 				? ArrayItem extends Date
 					?
 							| JoinPath<Current, JoinPath<K & string, "$">>
 							| JoinPath<Current, K & string>
 					: ArrayItem extends Blob
 					?
 							| JoinPath<Current, JoinPath<K & string, "$">>
 							| JoinPath<Current, K & string>
 					: ArrayItem extends Record<string, any> | readonly any[]
 					?
 							| InternalObjectPath<
 									ArrayItem,
 									JoinPath<Current, JoinPath<K & string, "$">>
 							  >
 							| JoinPath<Current, JoinPath<K & string, "$">>
 							| JoinPath<Current, K & string>
 					:
 							| JoinPath<Current, JoinPath<K & string, "$">>
 							| JoinPath<Current, K & string>
 				: T[K] extends Date
 				? JoinPath<Current, K & string>
 				: T[K] extends Blob
 				? JoinPath<Current, K & string>
 				: T[K] extends Record<string, any> | readonly any[]
 				?
 						| InternalObjectPath<T[K], JoinPath<Current, K & string>>
 						| JoinPath<Current, K & string>
 				: JoinPath<Current, K & string>;
 	  }>;

 export type ObjectPath<T extends Record<string, any>> = InternalObjectPath<T>;

 type User = {
 	id: number;
 	username: string;
 };

 type TestObj = {
 	hello: string;
 	nested: {
 		value: number;
 		moreNested: {
 			flag: boolean;
 			anotherString: string;
 		};
 		someDate: Date;
 	};
 	numArray: number[];
 	userArray: User[];
 	arrayOfNumberArrays: number[][];
 	aFileBlob: Blob;
 };

 const testObjSchema = z.object({
 	hello: z.string(),
 	nested: z.object({
 		value: z.number(),
 		moreNested: z.object({
 			flag: z.boolean(),
 			anotherString: z.string(),
 		}),
 		someDate: z.date(),
 	}),
 	numArray: z.array(z.number()),
 	userArray: z.array(
 		z.object({
 			id: z.number(),
 			username: z.string(),
 		}),
 	),
 	arrayOfNumberArrays: z.array(z.array(z.number())),
 	aFileBlob: z.instanceof(Blob),
 });

 type TestObjPath = Simplify<ObjectPath<TestObj>>;

 export type GetPath<
 	Obj extends Record<string, any> | readonly any[],
 	P extends ObjectPath<Obj>,
 > = P extends `${infer Key}.${infer Rest}`
 	? Key extends "$"
 		? Obj extends readonly (infer Elem)[]
 			? GetPath<Elem, Rest>
 			: never
 		: Key extends keyof Obj
 		? GetPath<Obj[Key], Rest>
 		: never
 	: P extends "$"
 	? Obj extends readonly (infer Elem)[]
 		? Elem
 		: never
 	: P extends keyof Obj
 	? Obj[P]
 	: never;

 type PathWithValue<Obj extends Record<string, any>, Value> = ValueOf<{
 	[P in ObjectPath<Obj>]: GetPath<Obj, P> extends Value ? P : never;
 }>;

 type OmitNever<T extends Record<string, any>> = {
 	[K in keyof T as T[K] extends never ? never : K]: T[K];
 };

 type RemoveNeverArrays<T extends Record<string, any>> = OmitNever<{
 	[K in keyof T]: T[K] extends readonly any[]
 		? T[K] extends never[]
 			? never
 			: T[K]
 		: T[K];
 }>;

 type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (
 	k: infer I,
 ) => void
 	? I
 	: never;

 type LastInUnion<U> = UnionToIntersection<
 	U extends any ? () => U : never
 > extends () => infer L
 	? L
 	: never;

 type PushOrderless<Arr extends any[], V> = [...Arr, V] | [V, ...Arr];

 type TuplifyUnionRecursively<U, L = LastInUnion<U>, T extends any[] = []> = [
 	U,
 ] extends [never]
 	? T
 	: TuplifyUnionRecursively<
 			Exclude<U, L>,
 			LastInUnion<Exclude<U, L>>,
 			PushOrderless<T, L>
 	  >;

 type ExhaustiveArray<U> = TuplifyUnionRecursively<U>;

 type SmartDecodeOptions<Obj extends Record<string, any>> = RemoveNeverArrays<{
 	arrays: ExhaustiveArray<PathWithValue<Obj, readonly any[]>>;
 	dates: ExhaustiveArray<PathWithValue<Obj, Date>>;
 	booleans: ExhaustiveArray<PathWithValue<Obj, boolean>>;
 	numbers: ExhaustiveArray<PathWithValue<Obj, number>>;
 	files: ExhaustiveArray<PathWithValue<Obj, Blob>>;
 }>;

 const smartDecode = <Schema extends z.ZodType<any, any>>(
 	schema: Schema,
 	formData: FormData,
 	options: SmartDecodeOptions<z.input<Schema>>,
 ): z.infer<Schema> => {
 	const decoded = decode(formData, options);
 	const parsed = schema.parse(decoded);
 	return parsed;
 };

 // TESTING

 export const testResult = smartDecode(testObjSchema, new FormData(), {
 	dates: ["nested.someDate"],
 	numbers: [
 		"nested.value",
 		"numArray.$",
 		"userArray.$.id",
 		"arrayOfNumberArrays.$.$",
 	],
 	arrays: [
 		"numArray",
 		"userArray",
 		"arrayOfNumberArrays",
 		"arrayOfNumberArrays.$",
 	],
 	booleans: ["nested.moreNested.flag"],
 	files: ["aFileBlob"],
 });
diff --git a/fun-ts---zod-express-validation.ts b/fun-ts---zod-express-validation.ts
 import { Request, RequestHandler, Router } from "express";
 import { JsonObject } from "type-fest";
 import * as z from "zod/v4";

 // Used as the base for what kind of schemas are allowed
 export type AnyValidatorSchema = z.ZodType<JsonObject, JsonObject>


 export type RequestValidator<Schema extends AnyValidatorSchema> = {
 	middleware: RequestHandler;
 	retrieve: (req: Request) => z.infer<Schema>;
 }

 /** 
 * Internal helper for constructing the functions that build validators
 */
 const validatorFactoryFactory = (getData: (req: Request) => unknown) => <Schema extends AnyValidatorSchema>(
 	schema: Schema
 ): RequestValidator<Schema> => {
 	const cache = new WeakMap<Request, z.infer<Schema>>();

 	return {
 		middleware: (req, res, next) => {
 			const result = schema.safeParse(getData(req));
 			if (!result.success) {
 				res.status(400).json({
 					error: "Invalid request data",
 					details: result.error.issues
 				});
 				return;
 			}
 			cache.set(req, result.data);
 			next();
 		},
 		retrieve: (req) => {
 			const cached = cache.get(req);
 			if (!cached) {
 				throw new Error("Attempted to retrieve validation result from an unvalidated request");
 			}
 			return cached;
 		}
 	};
 };

 // Validator builders

 export const bodyValidator = validatorFactoryFactory(req => req.body);
 export const queryValidator = validatorFactoryFactory(req => req.query);
 export const paramsValidator = validatorFactoryFactory(req => req.params);

 // Example Usage

 const previewEmailParamsValidator = paramsValidator(z.object({
 	emailId: z.string()
 }));

 const previewEmailQueryValidator = queryValidator(z.record(z.string(), z.string()))

 const router = Router();

 router.get(
 	"/emails/preview/:templateId",
 	previewEmailParamsValidator.middleware,
 	previewEmailQueryValidator.middleware,
 	(req, res) => {
 		const { emailId } = previewEmailParamsValidator.retrieve(req);
 		const variables = previewEmailQueryValidator.retrieve(req);
 	}

 )
diff --git a/html---Accessible Link Overlay.md b/html---Accessible Link Overlay.md
diff --git a/html---Easy Fallback Images.md b/html---Easy Fallback Images.md
diff --git a/html---Intelligent Word Wrapping.md b/html---Intelligent Word Wrapping.md
diff --git a/html---Special Mobile Keyboards.md b/html---Special Mobile Keyboards.md
diff --git a/js-ts---Advanced Type Tips.md b/js-ts---Advanced Type Tips.md
diff --git a/js-ts---Auto Versioning + Release Setup.md b/js-ts---Auto Versioning + Release Setup.md
diff --git a/js-ts---CLI Caching.md b/js-ts---CLI Caching.md
diff --git a/js-ts---Controlling Workspace Exports.md b/js-ts---Controlling Workspace Exports.md
diff --git a/js-ts---DIY Exhaustive Switch Enforcing.md b/js-ts---DIY Exhaustive Switch Enforcing.md
diff --git a/js-ts---Durations.md b/js-ts---Durations.md
diff --git a/js-ts---Env Setup.md b/js-ts---Env Setup.md
diff --git a/js-ts---Exhaustive Tuple Array Type.md b/js-ts---Exhaustive Tuple Array Type.md
diff --git a/js-ts---Formatting Setup.md b/js-ts---Formatting Setup.md
diff --git a/js-ts---FP Function Composition.md b/js-ts---FP Function Composition.md
diff --git a/js-ts---Generics That Accept All With Exceptions.md b/js-ts---Generics That Accept All With Exceptions.md
diff --git a/js-ts---Google Cloud Logger.md b/js-ts---Google Cloud Logger.md
diff --git a/js-ts---How To Typecheck.md b/js-ts---How To Typecheck.md
diff --git a/js-ts---Monorepo Versioning + Release Setup.md b/js-ts---Monorepo Versioning + Release Setup.md
diff --git a/js-ts---Notes on NaN.md b/js-ts---Notes on NaN.md
diff --git a/js-ts---Overriding Module Types.md b/js-ts---Overriding Module Types.md
diff --git a/js-ts---Platform Compatibility Issues.md b/js-ts---Platform Compatibility Issues.md
diff --git a/js-ts---Redux Style Types.md b/js-ts---Redux Style Types.md
diff --git a/js-ts---Replacing Enums.md b/js-ts---Replacing Enums.md
diff --git a/js-ts---Serializing Data For Search Params.md b/js-ts---Serializing Data For Search Params.md
diff --git a/js-ts---Tips on Getting Playwright Tests to Work Consistently.md b/js-ts---Tips on Getting Playwright Tests to Work Consistently.md
diff --git a/js-ts---TS Script Tips.md b/js-ts---TS Script Tips.md
diff --git a/js-ts---Type Checking ESLint Config.md b/js-ts---Type Checking ESLint Config.md
diff --git a/js-ts---Type Safe Error Handling.md b/js-ts---Type Safe Error Handling.md
diff --git a/js-ts---Typed Route Param Path.md b/js-ts---Typed Route Param Path.md
diff --git a/js-ts---Typed Routing Draft.md b/js-ts---Typed Routing Draft.md
diff --git a/js-ts---Typescript Types Noughts and Crosses.ts b/js-ts---Typescript Types Noughts and Crosses.ts
 // SCROLL TO BOTTOM TO SEE HOW TO PLAY

 type Team = 'noughts' | 'crosses';

 type Empty = '#';
 type Nought = 'O';
 type Cross = 'X';
 type Piece = Nought | Cross;
 type Square = Empty | Piece;

 type GetTeamPiece<TheTeam extends Team> = TheTeam extends 'noughts' ? Nought : Cross;

 type Row<Square1 extends Square, Square2 extends Square, Square3 extends Square> = `${Square1}${Square2}${Square3}`;
 type AnyRow = Row<Square, Square, Square>;

 type Board<Row1 extends AnyRow, Row2 extends AnyRow, Row3 extends AnyRow> = {
  t: Row1;
  m: Row2;
  b: Row3;
 };
 type AnyBoard = Board<AnyRow, AnyRow, AnyRow>;
 type EmptyRow = Row<Empty, Empty, Empty>;
 type EmptyBoard = Board<EmptyRow, EmptyRow, EmptyRow>;

 type VerticalPosition = 't' | 'm' | 'b';
 type HorizontalPosition = 'l' | 'c' | 'r';
 type PiecePosition = `${VerticalPosition}${HorizontalPosition}`;

 type ProcessRowMove<
  TheRow extends AnyRow,
  TheTeam extends Team,
  Horizontal extends HorizontalPosition
 > = TheRow extends Row<infer Left, infer Middle, infer Right>
  ? [Horizontal, Left] extends ['l', Empty]
  ? Row<GetTeamPiece<TheTeam>, Middle, Right>
  : [Horizontal, Middle] extends ['c', Empty]
  ? Row<Left, GetTeamPiece<TheTeam>, Right>
  : [Horizontal, Right] extends ['r', Empty]
  ? Row<Left, Middle, GetTeamPiece<TheTeam>>
  : never
  : never;

 type ProcessMove<TheBoard extends AnyBoard, TheTeam extends Team, Position extends PiecePosition> = TheBoard extends Board<infer TopRow, infer MiddleRow, infer BottomRow>
  ? Position extends `t${infer Horizontal extends HorizontalPosition}`
  ? Board<ProcessRowMove<TopRow, TheTeam, Horizontal>, MiddleRow, BottomRow>
  : Position extends `m${infer Horizontal extends HorizontalPosition}`
  ? Board<TopRow, ProcessRowMove<MiddleRow, TheTeam, Horizontal>, BottomRow>
  : Position extends `b${infer Horizontal extends HorizontalPosition}`
  ? Board<TopRow, MiddleRow, ProcessRowMove<BottomRow, TheTeam, Horizontal>>
  : never
  : never;

 // PLAY 

 // type A = ProcessMove<EmptyBoard, 'crosses', 'bl'>;
 // type B = ProcessMove<A, 'noughts', 'bc'>;
 // type C = ProcessMove<B, 'crosses', 'br'>;
diff --git a/js-ts---Utility Types.md b/js-ts---Utility Types.md
diff --git a/patterns---Common Naming Conflicts.md b/patterns---Common Naming Conflicts.md
diff --git a/patterns---Composing Labels Out of Multiple Nullable Pieces.md b/patterns---Composing Labels Out of Multiple Nullable Pieces.md
diff --git a/patterns---Data Migrations.md b/patterns---Data Migrations.md
diff --git a/patterns---Doing Fancy Inputs.md b/patterns---Doing Fancy Inputs.md
diff --git a/react---TransisitionList.tsx b/react---TransisitionList.tsx
 /**
 * A headless component for rendering a list that helps with
 * applying transition animations when items are added/removed.
 */

 import { ReactNode, useEffect, useMemo, useState } from "react";

 type TransitionStatus = "entering" | "exiting" | "stable";

 type TransitionListProps<ListEntity> = {
 	data: ListEntity[];
 	transitionMsDuration: number;
 	render: (entity: ListEntity, status: TransitionStatus) => ReactNode;
 	compare: (a: ListEntity, b: ListEntity) => boolean;
 	sorter: (a: ListEntity, b: ListEntity) => number;
 };

 type TransitionEntityStatus<T> = {
 	entity: T;
 	status: TransitionStatus;
 };

 type ComposeTransitionListStatusReportInput<T> = {
 	baseList: T[];
 	debouncedList: T[];
 	compare: (a: T, b: T) => boolean;
 	sorter: (a: T, b: T) => number;
 };

 const composeTransitionListStatusReport = <T,>({
 	baseList,
 	debouncedList,
 	compare,
 	sorter,
 }: ComposeTransitionListStatusReportInput<T>): TransitionEntityStatus<T>[] => {
 	const reportOnExistingItems: TransitionEntityStatus<T>[] = debouncedList.map(
 		(debouncedListEntity) => {
 			const entityMustExit = !baseList.some((baseListEntity) =>
 				compare(baseListEntity, debouncedListEntity),
 			);

 			if (entityMustExit) {
 				return { entity: debouncedListEntity, status: "exiting" };
 			}

 			return {
 				entity: debouncedListEntity,
 				status: "stable",
 			};
 		},
 	);

 	const newItems = baseList.filter((baseListEntity) => {
 		const alreadyExists = debouncedList.some((debouncedListEntity) =>
 			compare(baseListEntity, debouncedListEntity),
 		);
 		return !alreadyExists;
 	});

 	const reportOnNewItems: TransitionEntityStatus<T>[] = newItems.map(
 		(newItem) => ({
 			entity: newItem,
 			status: "entering",
 		}),
 	);

 	const finishedReport: TransitionEntityStatus<T>[] = [
 		...reportOnExistingItems,
 		...reportOnNewItems,
 	].sort((a, b) => sorter(a.entity, b.entity));

 	return finishedReport;
 };

 const useDebouncedValue = <T,>(value: T, delayMs: number): T => {
 	const [debouncedValue, setDebouncedValue] = useState(value);

 	useEffect(() => {
 		const timeout = setTimeout(() => {
 			setDebouncedValue(value);
 		}, delayMs);

 		return () => {
 			clearTimeout(timeout);
 		};
 	}, [value, delayMs]);

 	return debouncedValue;
 };

 export const TransitionList = <ListEntity,>({
 	data,
 	transitionMsDuration,
 	render,
 	compare,
 	sorter,
 }: TransitionListProps<ListEntity>) => {
 	const debouncedList = useDebouncedValue(data, transitionMsDuration);

 	const allItemsWithStatus = useMemo(
 		() =>
 			composeTransitionListStatusReport({
 				baseList: data,
 				debouncedList,
 				compare,
 				sorter,
 			}),
 		[data, debouncedList, compare, sorter],
 	);

 	return (
 		<>
 			{allItemsWithStatus.map(({ entity, status }) => render(entity, status))}
 		</>
 	);
 };
diff --git a/stepinsight---joi-infer-proto.ts b/stepinsight---joi-infer-proto.ts
 /**
 * Experimenting with better type inference for Joi schemas
 */
 import { Joi } from 'express-validation';
 import {AnySchema, BooleanSchema, NumberSchema, Schema, StringSchema, ObjectSchema } from 'joi'

 type PrimitiveSchema = StringSchema | BooleanSchema | NumberSchema;

 type InferPrimitiveSchema<T extends AnySchema> = T extends StringSchema ? string :
  T extends BooleanSchema ? boolean :
  T extends NumberSchema ? number :
  never;


 type InferJoiType<TheSchema extends AnySchema> = TheSchema extends PrimitiveSchema ? InferPrimitiveSchema<TheSchema> :
  TheSchema extends Schema<infer T> ? T :
  never;

 type A = InferJoiType<ObjectSchema<{
  firstName: string;
 }>>;

 type InferJoiFromFieldSchemas<FieldSchemas extends Record<string, AnySchema>> = {
  [Key in keyof FieldSchemas]: InferJoiType<FieldSchemas[Key]>;
 };


 const betterJoiObject = <FieldSchemas extends Record<string, AnySchema>>(fields: FieldSchemas) => Joi.object<InferJoiFromFieldSchemas<FieldSchemas>>(fields);

 const betterJoiArray = <ItemSchema extends AnySchema>(itemSchema: ItemSchema) => Joi.array().items(itemSchema) as AnySchema<InferJoiType<ItemSchema>[]>;

 const wa = betterJoiObject({
  firstName: Joi.string().required(),
  ids: betterJoiArray(Joi.number()).required(),
  opt: Joi.string().optional()
 })

 const testOutput = wa.validate({}).value!;
diff --git a/svelte---essentials.svelte.ts b/svelte---essentials.svelte.ts
 import { getContext, hasContext, setContext } from "svelte";

 export const composeContextHelpers = <Data>(key: string) => ({
 	get: () => getContext<Data | undefined>(key), // returns undefined if the context has not been set
 	getEssential: () => {
 		// Throws an error if the context has not been set
 		if (!hasContext(key)) {
 			throw new Error(
 				`Tried to access essential context "${key}" but it has not been set.`,
 			);
 		}
 		return getContext<Data>(key);
 	},
 	set: (data: Data) => setContext(key, data),
 	has: () => hasContext(key),
 });
diff --git a/svelte---React Equivalents.md b/svelte---React Equivalents.md
diff --git a/tailwind---Fix Tailwind PostCSS IDE Errors.md b/tailwind---Fix Tailwind PostCSS IDE Errors.md
diff --git a/tailwind---Tailwind Component Styling.md b/tailwind---Tailwind Component Styling.md
	/**
	* This allows you to use a CSS grid to have columns
	* that automatically adjust to fill the entire width
	* of the container
	*/

	.grid {
	/* In order for this to work, you must have specific min and max widths
	for the columns */
	--column-max-width: your-max-width-here;
	--column-min-width: your-min-width-here;

	display: grid;
	grid-template-columns: repeat(
	auto-fit,
	minmax(var(--column-min-width), var(--column-max-width))
	);
	justify-content: space-between; /* If it can't fill the parent exactly, space the items out */
	}
	/*
	* This is a quick and easy method for having a grid where all columns
	* are the same dynamic width, and the number of columns changes
	* responsively at different breakpoints
	*/

	.grid {
	--column-count: 2; /* The number of columns you want for mobile */

	/*
	* If you are designing for desktop primarily, the initial value for
	* `--column-count` should be the number of columns you want for desktop,
	* and adjust the media queries accordingly.
	*/

	display: grid;
	grid-template-columns: repeat(var(--column-count), minmax(0, 1fr));
	/*
	* `minmax(0, 1fr)` makes sure all columns are the same width.
	* If you need a minimum column width, pass it as the first argument
	* in `minmax` instead of `0`.
	*/
	}

	@media screen and (min-width: 768px) {
	.grid {
	--column-count: 4;
	}
	}

	@media screen and (min-width: 1024px) {
	.grid {
	--column-count: 6;
	}
	}

	@media screen and (min-width: 1280px) {
	.grid {
	--column-count: 8;
	}
	}
	/**
	* THIS IS A DRAFT OF A MINIMALIST LAYOUT CSS FRAMEWORK, THE GOAL WOULD BE TO
	* TO PROVIDE A LIGHTWEIGHT, OPINIONATED APPROACH TO LAYOUTS LIKE BOOTSTRAP,
	* BUT WITHOUT THE BAGGAGE OF A FULL CSS FRAMEWORK.
	*/

	// CONFIGURATION
	$config-max-grid-columns: 12;

	// When defining breakpoints, we treat mobile devices as the default
	// and define breakpoints as min-width for larger devices.
	$config-bp-tablet-min: 768px;
	$config-bp-desktop-min: 1024px;

	// TODO: define key/value pairs for breakpoints so they
	// can be iterated through

	@if $config-max-grid-columns < 1 {
	@error "The maximum number of grid columns must be at least 1";
	}

	// TODO: define all the styles as a mixin, then define the base
	// along with breakpoint conditionals.



	// STYLES
	.flex {
	&.row,&.col {
	display: flex;
	}

	&.row {
	flex-direction: row;

	&.h- {
	&center {
	justify-content: center;
	}
	&left {
	justify-content: flex-start;
	}
	&right {
	justify-content: flex-end;
	}
	&between {
	justify-content: space-between;
	}
	&around {
	justify-content: space-around;
	}
	}

	&.v- {
	&center {
	align-items: center;
	}
	&top {
	align-items: flex-start;
	}
	&bottom {
	align-items: flex-end;
	}
	&stretch {
	align-items: stretch;
	}
	}
	}

	&.col {
	flex-direction: column;

	&.h- {
	&center {
	align-items: center;
	}
	&top {
	align-items: flex-start;
	}
	&bottom {
	align-items: flex-end;
	}
	&stretch {
	align-items: stretch;
	}
	}

	&.v- {
	&center {
	justify-content: center;
	}
	&left {
	justify-content: flex-start;
	}
	&right {
	justify-content: flex-end;
	}
	&between {
	justify-content: space-between;
	}
	&around {
	justify-content: space-around;
	}
	}
	}
	}

	.grid {
	display: grid;
	@for $i from 1 through $config-max-grid-columns {
	&.col-#{$i} {
	grid-template-columns: repeat($i, 1fr);
	}
	}
	}
	/**
	* An example of how you can use Sass variables and CSS
	* custom properties to theme your application.
	*/
	@use 'sass:map';

	/**
	* By using Sass variables to contain our CSS custom properties,
	* we can prevent mistakes in our code, as the Sass compiler will
	* throw an error if we reference a variable that does not exist.
	*/

	$color-primary: '--color-primary';
	$color-primary-foreground: '--color-primary-foreground';

	$color-secondary: '--color-secondary';
	$color-secondary-foreground: '--color-secondary-foreground';

	$color-schemes: (
	light: (
	mode: light,
	primary: #007bff,
	primary-foreground: #ffffff,
	secondary: #6c757d,
	secondary-foreground: #ffffff
	),
	dark: (
	mode: dark,
	primary: #375a7f,
	primary-foreground: #ffffff,
	secondary: #444,
	secondary-foreground: #ffffff
	)
	);

	/**
	* Take a map containing the color values for a color scheme
	* and define the corresponding CSS custom properties.
	*/

	@mixin apply-color-scheme($scheme) {
	color-scheme: map.get($scheme, mode);
	#{$color-primary}: map-get-essential($scheme, primary);
	#{$color-primary-foreground}: map-get-essential($scheme, primary-foreground);
	#{$color-secondary}: map-get-essential($scheme, secondary);
	#{$color-secondary-foreground}: map-get-essential($scheme, secondary-foreground);
	}

	@function map-get-essential($map, $key) {
	$value: map.get($map, $key);
	@if not $value {
	@error "Key `#{$key}` not found in map `#{$map}`.";
	}
	@return $value;
	}

	/**
	* Shorthand QOL helper that lets us use our CSS custom properties
	* without having to write out string interpolation every time.
	*/
	@function _var($name, $fallback: null) {
	@return var(#{($name, $fallback)});
	// The weird syntax with the list makes sure the fallback
	// won't get passed in if its null.
	}

	html {
	@include apply-color-scheme(map.get($color-schemes, light)); // Default to light theme

	@each $key, $scheme in $color-schemes {
	&.theme--#{$key} {
	@include apply-color-scheme($scheme);
	}
	}
	}

	// EXAMPLE COMPONENT STYLE

	button {
	padding: 10px 20px;
	border-radius: 5px;

	background-color: _var($color-primary);
	color: _var($color-primary-foreground);
	border: none;

	cursor: pointer;

	&:hover {
	background-color: _var($color-secondary);
	color: _var($color-secondary-foreground);
	}
	}
	/* eslint-disable @typescript-eslint/no-unused-vars */

	/**
	* This is a basic implementation of type-safe dependency injection. It uses
	* generator functions that yield `InjectionYield` instances, which specify
	* what class then must be injected. The `injectDependenciesAndRun` takes
	* such a generator function and an array of all the classes that can be
	* injected, and runs the generator, injecting the required dependencies.
	*/

	/**
	* TODO:
	* - Find a way to allow substitute classes to extend from the base class.
	* Currently the typing system only allows for classes that match the
	* dependency class exactly, with no extra fields. Try disallowing the
	* dependencies to be inferred from the array of depenendency classes,
	* although this may remove the type-checking that enforces all dependency
	* classes are provided, although that can be re-achieved by other means.
	*/

	// # UTILS

	type Class<T, Arguments extends unknown[] = any[]> = {
	prototype: Pick<T, keyof T>;
	new (...arguments_: Arguments): T;
	};

	type InferClassInstance<T> = T extends Class<infer U> ? U : never;

	type InferClassConstructorArguments<T> = T extends Class<any, infer U>
	? U
	: never;

	type InferGeneratorReturnType<T extends Generator> = T extends Generator<
	any,
	infer U,
	any
	>
	? U
	: never;

	//# MAIN LOGIC

	type DependantGenerator<DependentClass extends Class<any>, Return> = Generator<
	InjectionYield<DependentClass>,
	Return,
	InferClassInstance<DependentClass>
	>;

	class InjectionYield<TheClass extends Class<any>> {
	public readonly args: InferClassConstructorArguments<TheClass>;

	constructor(
	public readonly cls: TheClass,
	...args: InferClassConstructorArguments<TheClass>
	) {
	this.args = args;
	}

	*[Symbol.iterator](): Generator<
	this,
	InferClassInstance<TheClass>,
	InferClassInstance<TheClass>
	> {
	const theInstance = yield this;

	return theInstance;
	}
	}

	const compareClasses = (a: Class<any>, b: Class<any>) => {
	const aClasses = [a, ...(SUBSTITUTES.get(a) \|\| [])];
	const bClasses = [b, ...(SUBSTITUTES.get(b) \|\| [])];

	return aClasses.some((aCls) => bClasses.includes(aCls));
	};

	const withDependencies =
	<
	DependencyClass extends Class<any>,
	TGenFunc extends (
	...args: any[]
	) => DependantGenerator<DependencyClass, any>,
	>(
	genFunc: TGenFunc,
	dependencies: DependencyClass[],
	) =>
	(
	...args: Parameters<TGenFunc>
	): InferGeneratorReturnType<ReturnType<TGenFunc>> => {
	const generator = genFunc(...args);

	// Iterator over generator
	let currentInjectionYield = generator.next();

	while (!currentInjectionYield.done) {
	const classToInject = dependencies.find((cls) =>
	compareClasses(cls \|\| cls, currentInjectionYield.value.cls),
	);

	if (!classToInject)
	throw new Error(
	`Dependency not provided: ${currentInjectionYield.value.cls.name}`,
	);

	currentInjectionYield = generator.next(
	new classToInject(...currentInjectionYield.value.args),
	);
	}

	return currentInjectionYield.value;
	};

	// Maps classes to other classes that can substitute for them
	const SUBSTITUTES = new WeakMap<Class<any>, Class<any>[]>();

	/**
	* Class decorator that allows a class to be used as a substitute for
	* another in dependency injection. The type of the substitute class
	* must be compatible with the original class. It is recommended that
	* substitute classes `implement` the original class to ensure type
	* compatibility.
	*
	* Substitution relationships are birdirectional, so if `A` is a substitute
	* for `B`, then `B` is also a substitute for `A`. This is required to allow
	*
	*/
	function SubstituteFor<T extends Class<any>>(original: T) {
	return function <U extends Class<any>>(target: U) {
	const originalSubstitutes = SUBSTITUTES.get(original) \|\| [];
	originalSubstitutes.push(target);
	SUBSTITUTES.set(original, originalSubstitutes);

	const targetSubstitutes = SUBSTITUTES.get(target) \|\| [];
	targetSubstitutes.push(original);
	SUBSTITUTES.set(target, targetSubstitutes);
	};
	}

	// # EXAMPLE

	class StubService {
	doSomething() {
	console.log("Hi from StubService");
	}
	}

	@SubstituteFor(StubService) // This class will be recognized as a substitute for StubService in DI
	class MockStubService implements StubService {
	doSomething() {
	console.log("I am a sneaky mock of StubService!");
	}
	}

	class AltStubService {
	constructor(public someArg: string) {}

	exampleMethod() {
	console.log("Hi from AltStubService, I received this arg:", this.someArg);
	}
	}

	function* a() {
	const stubService = yield* new InjectionYield(StubService);
	const altStubService = yield* new InjectionYield(
	AltStubService,
	"an argument",
	);

	stubService.doSomething();
	altStubService.exampleMethod();

	return "All done!" as const;
	}

	const result = withDependencies(a, [StubService, AltStubService])();

	console.log("[a RETURN VALUE] ", result);

	// Nested DI function calls automatically add dependencies to typing

	function* b(paramA: number, paramB: number) {
	const resultFromA = yield* a();

	return "hi from B" as const;
	}

	const result2 = withDependencies(b, [MockStubService, AltStubService])(1, 2); // Can pass in mock classes if the types work

	// # Advanced example usage

	/**
	* This will demonstrate a use case of dependency injection, we will
	* inject a mock service that ensures a normally unpredictable service
	* returns values that are predictable, which could be useful for testing.
	*/

	/**
	* Pseudo-random number generator. Generated numbers will be unpredictable,
	* for humans, but will always be the same for the same seed.
	*
	* It works by taking a starting seed, then generating a new number using
	* that seed, and then takes the new generated value and uses that as the
	* next seed, and so on.
	*/
	class DeterministicRandomService {
	constructor(private seed: number) {
	this.next(); // Warm up the generator
	}

	next(): number {
	this.seed = (this.seed * 48271) % 2147483647;
	return this.seed / 2147483647;
	}
	}

	function* randomNumberGame(seed: number) {
	console.log("----- NEW GAME -----");
	console.log("Starting a new game with seed:", seed);

	const randomService = yield* new InjectionYield(
	DeterministicRandomService,
	seed,
	);

	const playerARoll = randomService.next();
	const playerBRoll = randomService.next();

	console.log(`Player A rolled: ${playerARoll}`);
	console.log(`Player B rolled: ${playerBRoll}`);

	if (playerARoll > playerBRoll) {
	console.log("Player A wins!");
	} else if (playerBRoll > playerARoll) {
	console.log("Player B wins!");
	} else {
	console.log("It's a tie!");
	}
	}

	console.log("Standard rounds:");

	for (let i = 0; i < 10; i++) {
	withDependencies(randomNumberGame, [DeterministicRandomService])(i);
	}

	@SubstituteFor(DeterministicRandomService)
	class MockRandomService extends DeterministicRandomService {
	next(): number {
	return 1;
	}
	}

	console.log("");
	console.log(
	"Mocked rounds, every game will be a tie with both players rolling 1:",
	);
	console.log(" ");
	for (let i = 0; i < 10; i++) {
	withDependencies(randomNumberGame, [MockRandomService])(i);
	}
	/**
	* Draft of a helper for creating custom typed arrays of entities. Could be very good
	* for implementing state management logic.
	*/

	const standardEquality = <T>(a: T, b: T): boolean =>
	a === b;

	type EntityHelperSuiteOptions<T, GenerateInput, FindByInput> = {
	isEqual?: (a: T, b: T) => boolean;
	generate: (input: GenerateInput) => T;
	findByMatcher: (input: FindByInput, entity: T) => boolean;
	clone?: (entity: T) => T;
	}

	type EntityHelperConstructorInput<T, GenerateInput, FindByInput> = EntityHelperSuiteOptions<T, GenerateInput, FindByInput> \| EntityHelperSuite<T, GenerateInput, FindByInput>;

	class EntityHelperSuite<T, GenerateInput, FindByInput> implements EntityHelperSuiteOptions<T, GenerateInput, FindByInput> {
	isEqual: (a: T, b: T) => boolean;
	clone: (entity: T) => T;
	generate: (input: GenerateInput) => T;
	findByMatcher: (input: FindByInput, entity: T) => boolean;

	constructor(
	input: EntityHelperConstructorInput<T, GenerateInput, FindByInput>
	) {
	this.isEqual = input.isEqual ?? standardEquality;
	this.clone = input.clone ?? structuredClone;
	this.generate = input.generate
	this.findByMatcher = input.findByMatcher;
	}

	}

	type EnforceUniqueMode = 'allow' \| 'prevent' \| 'override' \| 'throw';
	// allow: allow duplicate entities to exist
	// prevent: discard any duplicate entity that would be added
	// override: replace existing entity with the new one
	// throw: throw an error if a duplicate entity is added

	class EntityArray<T, GenerateInput, FindByInput> {
	private helpers: EntityHelperSuite<T, GenerateInput, FindByInput>;

	private enforceUniqueMode: EnforceUniqueMode = 'allow'; // TODO: IMPLEMENT THIS

	constructor(
	public items: T[],
	helpers: EntityHelperConstructorInput<T, GenerateInput, FindByInput>
	) {
	this.helpers = new EntityHelperSuite<T, GenerateInput, FindByInput>(helpers);
	}

	// Configuration methods

	/**
	* NOTE: Must consider case where duplicates already exist when
	* unique mode is turned on.
	*/
	strictUnique(
	enforce: boolean = true
	): this {
	this.enforceUnique = enforce;
	return this;
	}

	// Custom methods

	clone(): EntityArray<T, GenerateInput, FindByInput> {
	return new EntityArray<T, GenerateInput, FindByInput>(
	this.items.map(item => this.helpers.clone(item)),
	this.helpers
	);
	}


	// Base Array Methods

	find(
	predicate: (item: T) => boolean
	): T \| undefined {
	return this.items.find(predicate);
	}

	findBy(
	input: FindByInput,
	): T \| undefined {
	return this.items.find(item => this.helpers.findByMatcher(input, item));
	}

	filter(
	predicate: (item: T) => boolean
	): EntityArray<T, GenerateInput, FindByInput> {
	return new EntityArray<T, GenerateInput, FindByInput>(
	this.items.filter(predicate),
	this.helpers
	);
	}

	map<U>(
	mapper: (item: T) => U
	): U[] {
	return this.items.map(mapper);
	}

	forEach(
	callback: (item: T) => void
	): void {
	this.items.forEach(callback);
	}

	reduce<U>(
	reducer: (accumulator: U, item: T) => U,
	initialValue: U
	): U {
	return this.items.reduce(reducer, initialValue);
	}

	some(
	predicate: (item: T) => boolean
	): boolean {
	return this.items.some(predicate);
	}

	every(
	predicate: (item: T) => boolean
	): boolean {
	return this.items.every(predicate);
	}

	includes(
	item: T
	): boolean {
	return this.items.some(existingItem => this.helpers.isEqual(existingItem, item));
	}

	includesBy(
	input: FindByInput,
	): boolean {
	return this.items.some(item => this.helpers.findByMatcher(input, item));
	}


	push(
	item: T
	): number {
	if (this.enforceU)
	this.items.push(item);
	return this.length;
	}

	pushNew(
	input: GenerateInput
	): T {
	const item = this.helpers.generate(input);
	this.push(item);
	return item;
	}

	get length(): number {
	return this.items.length;
	}


	}

	// EXAMPLE USAGE

	type Todo = {
	id: number;
	title: string;
	completed: boolean;
	}

	const todoHelpers = new EntityHelperSuite({
	generate: (input: { title: string; completed?: boolean }): Todo => ({
	id: Math.floor(Math.random() * 1000), // Simulating ID generation
	completed: input.completed ?? false,
	title: input.title
	}),
	isEqual: (a, b) => a.id === b.id,
	findByMatcher: (id: number, todo) => todo.id === id,
	clone: (todo) => ({ ...todo }),
	})

	const todoArray = new EntityArray([], todoHelpers);
	/**
	* Prototype for a function that returns a deep frozen version of an object.
	* The passed in object itself will not be frozen, but rather a frozen copy
	* is returned.
	*
	* The freezing is actually done by a proxy, rather than using Object.freeze
	* directly. Nested objects are only frozen when they are accessed to reduce
	* performance overhead.
	*
	* NOTE: You probably don't need this function, if you want to make sure a
	* developer does not mutate an object, you can just cast it as `Readonly<T>`.
	* This function is a last resort, perhaps if you are afraid an object might
	* be mutated by a third-party library, or your code might be used in JS
	* projects that won't respect the `Readonly<T>` type.
	*/
	const toFrozenDeep = <T>(obj: T): Readonly<T> => {
	if (typeof obj !== 'object' \|\| obj === null) {
	return Object.freeze(obj) as T;
	}

	const frozenChildCache = new WeakMap();

	return new Proxy(obj, {
	get(target, prop, receiver) {
	const value = Reflect.get(target, prop, receiver);
	const cachedFrozen = typeof value === 'object'
	? frozenChildCache.get(value)
	: undefined;
	const frozenValue = cachedFrozen ?? toFrozenDeep(value);
	if (typeof value === 'object' && !frozenChildCache.has(value)) {
	frozenChildCache.set(value, frozenValue);
	}
	return frozenValue;
	},
	set: () => {
	throw new TypeError('Cannot modify a frozen object');
	}
	})
	}

	type LogCommandMethod = 'log' \| 'info' \| 'warn' \| 'error' \| 'debug';

	class Logger {
	constructor(private labels: string[]) { }

	private send(method: LogCommandMethod, ...args: any[]) {
	console[method](`[${this.labels.join('.')}]: `, ...args);
	}

	log(...args: any[]) {
	this.send('log', ...args);
	}

	info(...args: any[]) {
	this.send('info', ...args);
	}

	warn(...args: any[]) {
	this.send('warn', ...args);
	}

	error(...args: any[]) {
	this.send('error', ...args);
	}

	debug(...args: any[]) {
	this.send('debug', ...args);
	}
	}


	type PickByValue<T, V> = {
	[K in keyof T]: T[K] extends V ? K : never;
	};

	type PickMethods<T> = PickByValue<T, (...args: any[]) => any>;

	type MethodNames<T> = keyof PickMethods<T>;

	const methodLoggers = <T extends { constructor: { name: string } }>(target: T): Record<MethodNames<T>, Logger> =>
	new Proxy({} as any, {
	get: (obj, prop) => {
	if (!(prop in obj)) {
	const labels = [target.constructor.name, prop as string];
	obj[prop] = new Logger(labels);
	}
	return obj[prop];
	}
	})

	// EXAMPLE USAGE

	class ExampleService {
	private loggers = methodLoggers(this);

	doSomething() {
	const logger = this.loggers.doSomething;

	logger.info('Doing something...');
	}

	switchItUp(someId: number) {
	const logger = this.loggers.switchItUp;

	logger.warn(`Switching it up for ID: ${someId}`);
	}
	}

	const a = new ExampleService();

	a.doSomething();
	a.switchItUp(42);
	/**
	* Minimal prototype for adapting HTML events to an stream/observable-like API.
	* Allows for more functional and re-usable logic in handling events.
	* TODO:
	* - `scan` method (see simple counter example here: https://baconjs.github.io)
	* - Combine multiple emitters into one
	* - Filter events
	*/

	class Observable<Payload> {
	private listeners: ((payload: Payload) => void)[] = [];

	private constructor(
	private setup: (emit: (payload: Payload) => void) => void,
	private cleanup: (emit: (payload: Payload) => void) => void
	) {
	this.refresh();
	}

	/**
	* Destroy existing listeners and set up new ones. If app context changes and new
	* listeners need to be created (eg; more buttons are added to the DOM that need to
	* be listened to), this method should be called.
	*/
	refresh(): void {
	this.cleanup(this.emit);
	this.setup(this.emit);
	}

	/**
	* Listen to the observable
	*/
	on(listener: (payload: Payload) => void) {
	this.listeners.push(listener);
	return () => this.off(listener); // return callback to unsubscribe
	}

	/**
	* Stop listening to the observable
	*/
	off(listener: (payload: Payload) => void): void {
	this.listeners = this.listeners.filter(l => l !== listener);
	}

	emit = (payload: Payload): void => {
	// Must be an arrow function to maintain `this` context
	this.listeners.forEach(listener => listener(payload));
	}

	// Builder functions

	/**
	* Create an observable with no default condition to emit.
	* Must manually trigger `emit`
	*/
	static make<Payload>(): Observable<Payload> {
	return new Observable<Payload>(
	emit => {
	// No setup needed
	},
	emit => {
	// No cleanup needed
	}
	);
	}

	/**
	* Create an observable that listens to dom events on specific
	* elements
	*/
	static fromEvent<EventType extends keyof HTMLElementEventMap>(
	selector: string,
	eventType: EventType
	): Observable<HTMLElementEventMap[EventType]> {
	const emitter = new Observable<HTMLElementEventMap[EventType]>(
	emit => {
	document.querySelectorAll(selector).forEach(element => {
	element.addEventListener(eventType, emit as EventListener);
	});
	},
	emit => {
	document.querySelectorAll(selector).forEach(element => {
	element.removeEventListener(eventType, emit as EventListener);
	});
	}
	);

	return emitter;
	}

	}


	// EXAMPLE USAGE

	const toggleModal = () => {
	//...
	}

	const modalToggleClick = Observable.fromEvent(
	'#modal-toggle',
	'click'
	)

	modalToggleClick.on(() => {
	toggleModal();
	});

	// Alternate

	// Manually connect the observerable to the event callback,
	// gives more control, useful for frontend frameworks eg;
	// React, as you can connect the observable to the elements
	// event handler props
	const otherModalToggleClick = Observable.make<MouseEvent>();
	document.querySelector<HTMLButtonElement>('#other-modal-toggle')
	?.addEventListener('click', otherModalToggleClick.emit);
	/* eslint-disable @typescript-eslint/no-unused-vars */
	/**
	* Prototype of a custom global state management system for React, using the "new"
	* `useSyncExternalStore` hook.
	* TODO:
	* - SSR support (see jotai SSR) (look into potential issue of stores being re-used for multiple requests)
	* - Action middleware (eg; logging, analytics)
	*/
	import { useSyncExternalStore } from "react";

	// Utility functions, should be moved to a separate file

	export const basicEquality = <T>(a: T, b: T): boolean => a === b;

	export const memoize = <Fn extends (...args: any[]) => any>(fn: Fn): Fn => {
	const cache: [Parameters<Fn>, ReturnType<Fn>][] = [];

	return ((...args: Parameters<Fn>) => {
	const cached = cache.find(
	([cachedArgs]) =>
	cachedArgs.length === args.length &&
	cachedArgs.every((arg, i) => arg === args[i]),
	);

	if (cached) {
	return cached[1];
	}

	const result = fn(...args);
	cache.push([args, result]);
	return result;
	}) as unknown as Fn;
	};

	// Types

	export type StoreListenerFn<T> = (state: Readonly<T>) => void;

	export type StoreAction<Type extends string, Params extends unknown[]> = {
	type: Type;
	params: Params;
	// replacing typical `payload` field with `params` array makes it MUCH easier
	// to handle actions in a type-safe way.
	};

	export type ExtractActionByType<
	Action extends StoreAction<string, unknown[]>,
	Type extends string,
	> = Extract<Action, { type: Type }>;

	export type StoreActionHandlers<
	Data,
	Action extends StoreAction<string, unknown[]>,
	> = {
	[T in Action["type"]]: (
	state: Data,
	...params: ExtractActionByType<Action, T>["params"]
	) => Data;
	};

	export type StoreSelectorFn<Data, Selection> = (state: Data) => Selection;

	export type StoreSelectorFnBuilder<
	Data,
	Selection,
	Params extends unknown[],
	> = (...params: Params) => StoreSelectorFn<Data, Selection>;

	// Store Class

	export class Store<
	Data,
	Action extends StoreAction<string, any[]> = never,
	Selectors extends Record<string, StoreSelector<Data, any, any[]>> = Record<
	string,
	never
	>,
	> {
	private state: Data;

	private listeners: StoreListenerFn<Data>[] = [];
	private handlers: StoreActionHandlers<Data, Action> = {} as any;
	private selectorBuilders: Selectors = {} as any;
	private previousSelections: Map<StoreListenerFn<any>, any> = new Map();

	constructor(state: Data) {
	this.state = state;
	}

	private emit() {
	for (const listener of this.listeners) {
	listener(this.get());
	}
	}

	// Subscription methods

	unsubscribe(listener: StoreListenerFn<Data>) {
	this.listeners = this.listeners.filter((l) => l !== listener);
	}

	subscribe(listener: StoreListenerFn<Data>): () => void {
	this.listeners.push(listener);
	listener(this.state);
	return () => {
	this.listeners = this.listeners.filter((l) => l !== listener);
	};
	}

	subscribeSelect<Selection>(
	selector: (state: Data) => Selection,
	selectionListener: (selection: Selection) => void,
	equality: (a: Selection, b: Selection) => boolean = basicEquality,
	) {
	const fullListener: StoreListenerFn<Data> = (state) => {
	const currentSelection = selector(state);

	const selectionHasChanged =
	!this.previousSelections.has(selectionListener) \|\|
	!equality(
	this.previousSelections.get(selectionListener),
	currentSelection,
	);

	if (selectionHasChanged) {
	selectionListener(currentSelection);
	this.previousSelections.set(selectionListener, currentSelection);
	}
	};

	return this.subscribe(fullListener);
	}

	// State management methods

	private set(newState: Data): void {
	this.state = newState;
	this.emit();
	}

	get(): Readonly<Data> {
	return this.state as Readonly<Data>;
	}

	// Actions

	private handleAction(action: Action): void {
	const handler = this.handlers[action.type as Action["type"]];
	if (!handler) throw new Error(`No handler for action type: ${action.type}`);

	const newState = handler(this.state, ...action.params);
	this.set(newState);
	}

	addAction<Type extends string, Params extends unknown[]>(
	type: Type,
	handler: (state: Data, ...params: Params) => Data,
	): Store<Data, Action \| StoreAction<Type, Params>> {
	(this.handlers as any)[type] = handler;
	return this as any;
	}

	dispatch<Type extends Action["type"]>(
	type: Type,
	...params: ExtractActionByType<Action, Type>["params"]
	): void {
	const action = {
	type,
	params,
	};

	this.handleAction(action as never as Action);
	}

	// Selectors

	select<Selection>(selector: (state: Data) => Selection): Readonly<Selection> {
	return selector(this.get()) as Readonly<Selection>;
	}

	composeSelectorBuilder<Selection, Params extends unknown[]>(
	selectorWithState: (state: Data, ...params: Params) => Selection,
	): (...params: Params) => StoreSelectorFn<Data, Selection> {
	// For optimization, we cache selector functions, so we only ever create
	// a single selector function for each unique set of parameters.

	return memoize(
	(...params: Params) =>
	(state: Data) =>
	selectorWithState(state, ...params),
	);
	}

	addSelector<Key extends string, Params extends unknown[], Selection>(
	key: Key,
	selectorWithState: (state: Data, ...params: Params) => Selection,
	equality?: (a: Selection, b: Selection) => boolean,
	): Store<
	Data,
	Action,
	Selectors & Record<Key, StoreSelector<Data, Selection, Params>>
	> {
	const selector = new StoreSelector(this, selectorWithState, equality);

	(this.selectorBuilders as any)[key] = selector;
	return this as any;
	}

	get selectors(): Selectors {
	return this.selectorBuilders;
	}
	}

	// Selectors

	/**
	* Selectors exist as their own class so they can encapsulate equality
	* and memoization logic. They also contain a reference to the underlying
	* store, so they can be passed directly into `useStoreSelector` hook
	* without the need to pass the store separately.
	*/
	class StoreSelector<Data, Selection, Params extends unknown[] = []> {
	store: Store<Data, any, any>;

	selectorBuilder: StoreSelectorFnBuilder<Data, Selection, Params>;
	equality: (a: Selection, b: Selection) => boolean;

	constructor(
	store: Store<Data, any, any>,
	selectorWithState: (state: Data, ...params: Params) => Selection,
	equality: (a: Selection, b: Selection) => boolean = basicEquality,
	) {
	this.store = store;
	this.selectorBuilder = store.composeSelectorBuilder(selectorWithState);
	this.equality = equality;
	}
	}

	export type InferStoreSelectorSelection<
	TheSelector extends StoreSelector<any, any, any[]>,
	> = TheSelector extends StoreSelector<any, infer Selection, any[]>
	? Selection
	: never;

	export type InferStoreSelectorParams<
	TheSelector extends StoreSelector<any, any, any[]>,
	> = TheSelector extends StoreSelector<any, any, infer Params> ? Params : never;

	// Hooks

	export const useStore = <T>(store: Store<T, never>): Readonly<T> =>
	useSyncExternalStore(
	(listener) => store.subscribe(listener),
	() => store.get(),
	() => store.get(),
	);

	export const useStoreSelector = <
	TheSelector extends StoreSelector<any, any, any[]>,
	>(
	selector: TheSelector,
	...params: InferStoreSelectorParams<TheSelector>
	): Readonly<InferStoreSelectorSelection<TheSelector>> => {
	const selectorFn = selector.selectorBuilder(...params);
	return useSyncExternalStore(
	(listener) =>
	selector.store.subscribeSelect(selectorFn, listener, selector.equality),
	() => selector.store.select(selectorFn),
	() => selector.store.select(selectorFn),
	);
	};

	// EXAMPLE USAGE

	type Todo = {
	id: string;
	text: string;
	completed: boolean;
	};

	const todoStore = new Store<Todo[]>([])
	// actions
	.addAction("addTodo", (todos, text: string, completed: boolean) => [
	...todos,
	{ id: crypto.randomUUID(), text, completed },
	])
	.addAction("deleteTodo", (todos, id: string) =>
	todos.filter((todo) => todo.id !== id),
	)
	.addAction("toggleTodo", (todos, id: string) =>
	todos.map((todo) =>
	todo.id === id ? { ...todo, completed: !todo.completed } : todo,
	),
	)
	.addAction("clearTodos", () => [])
	// selectors
	.addSelector("first", (todos) => todos[0])
	.addSelector("id", (todos, id: string) =>
	todos.find((todo) => todo.id === id),
	)
	.addSelector("completed", (todos) => todos.filter((todo) => todo.completed))
	.addSelector("between", (todos, start: number, end: number) =>
	todos.slice(start, end),
	);

	todoStore.dispatch("addTodo", "Learn TypeScript", false);
	todoStore.dispatch("addTodo", "Build a React app", false);
	todoStore.dispatch("clearTodos");

	const useA = () => {
	const todos = useStore(todoStore);
	const firstTodo = useStoreSelector(todoStore.selectors.first);
	const specificTodo = useStoreSelector(todoStore.selectors.id, "some-id");
	const completedTodos = useStoreSelector(todoStore.selectors.completed);
	const firstFiveTodos = useStoreSelector(todoStore.selectors.between, 0, 5);
	};

	// RECIPE EXAMPLE

	/**
	* Example of creating a store "recipe", which lets us create multiple stores
	* that follow similar patterns. In this example we will create a recipe for
	* managing modals that contain the UI for editing or creating entities.
	*/

	type EntityEditModalState =
	\| {
	mode: "closed" \| "new";
	}
	\| {
	mode: "edit";
	entityId: string;
	};

	const composeEntityEditModalStore = () =>
	new Store<EntityEditModalState>({ mode: "closed" })
	// Actions
	.addAction("openNew", () => ({ mode: "new" }))
	.addAction("openEdit", (_, entityId: string) => ({
	mode: "edit",
	entityId,
	}))
	.addAction("close", () => ({ mode: "closed" }))
	// Selectors
	.addSelector("isOpen", (state) => state.mode !== "closed")
	.addSelector("entityId", (state): string \| undefined => {
	if (state.mode !== "edit") return undefined;
	return state.entityId;
	});

	const todoEditModalStore = composeEntityEditModalStore();

	const EditTodoModal = () => {
	const isOpen = useStoreSelector(todoEditModalStore.selectors.isOpen);
	const editTodoId = useStoreSelector(todoEditModalStore.selectors.entityId);
	};