PezzerDev’s gists

PezzerDev / .prettierrc

Last active April 28, 2024 04:15

Prettier config #config #template

PezzerDev / firebase.ts

Last active April 29, 2024 14:15

Typesafe Firestore collection #firebase #firestore #typescript

	// A generic Firestore converter that provides type inference
	export const genericConverter = <T>() => ({
	toFirestore: (data: PartialWithFieldValue<T>) => data ?? {},
	fromFirestore: (snap: QueryDocumentSnapshot) => snap.data() as T,
	});

	// A wrapper of collection() that uses a generic converter to provide type inference
	export const typedCollection = <T>(db: Firestore, name: string) =>
	collection(db, name).withConverter<T>(genericConverter<T>());

PezzerDev / click-outside.ts

Created April 30, 2024 22:06

Click Outside directive #svelte #typescript #directive

	export default function clickOutside(node: HTMLElement) {
	const handleClick = (event: MouseEvent) => {
	if (!node.contains(event.target as Node)) {
	node.dispatchEvent(new CustomEvent('outsideclick'));
	}
	};

	// The node has been mounted to the DOM
	window.addEventListener('click', handleClick);

PezzerDev / stop-propagation.ts

Created April 30, 2024 22:11

Sop Propagation directive #svelte #typescript #directive

	export default function stopPropagation(fn: (e: Event) => void) {
	return function (this: (e: Event) => void, event: Event) {
	event.stopPropagation();
	fn.call(this, event);
	};
	}

PezzerDev / tailwind-transition.ts

Created April 30, 2024 22:12

Svelte/Tailwind transition directive #svelte #tailwind #animation #transition #directive

	import { linear } from 'svelte/easing';

	type TickFunc = (t: number) => number \| void;

	export interface TailwindTransitionOptions {
	delay?: number;
	easing?: (t: number) => number;
	base?: string;
	from?: string;
	to?: string;

PezzerDev / prevent-default.ts

Last active May 6, 2024 20:46

Prevent Default directive #svelte #typescript #directive

	export default function preventDefault<T extends Event>(fn: (e: T) => void \| Promise<void>) {
	return function (this: (e: T) => void, event: T) {
	event.preventDefault();
	fn.call(this, event);
	};
	}

PezzerDev / tailwind.config.cjs

Last active May 2, 2024 16:43

Tailwind paper shadow #tailwind #css #material-design

PezzerDev / breakpoint-indicator.svelte

Created May 2, 2024 17:36

Breakpoint indicator #svelte #tailwind #breakpoints

	<script lang="ts">
	import { dev } from '$app/environment';

	let hide = $state(false);
	</script>

	{#if dev}
	<aside
	ondblclick={() => (hide = true)}
	class:!hidden={hide}

PezzerDev / to-state.svelte.ts

Created May 3, 2024 02:19

Svelte 5 Store to State #svelte #store #typescript

	// !! This is yet untested
	import type { Writable } from 'svelte/store';

	export const toState = <T>(store: Writable<T>, initial: T \| null = null) => {
	let value = $state<T \| null>(initial);

	const stateful = {
	get: () => value,
	set: (newValue: T) => {
	store.set(newValue);

PezzerDev / error.ts

Last active March 12, 2025 16:47

Typescript Error class #typescript

	type ErrorName = 'Unknown Error' \| 'Initialization Error';

	export class ProjectError extends Error {
	name: ErrorName;
	data?: Record<string, unknown>;

	constructor({ name, message, data }: { name: ErrorName; message: string; data?: Record<string, unknown> }) {
	super();
	this.name = name;
	this.message = message;

Spence DiNicolantonio PezzerDev