gvergnaud

name	typescript-code-quality
description	Use when designing or refactoring code for maintainability, clarity, and strong module boundaries. Emphasize local reasoning, explicit dependencies, separation of side effects from pure logic, separation of control flow from data flow, pragmatic functional patterns over stateful Object Oriented design, and stable module APIs.

Code Quality Architecture

Apply this skill when writing or reviewing code that should be easy to reason about, easy to change, and easy to test.

Core Principle: Local Reasoning

gvergnaud

/**
 * This function ensures there's a single instance of a given effectful function
 * running at a time. If the function is called while it's already running,
 * the arguments are combined and the function is called again with the combined
 * arguments.
 */
export function oneAtATime<Args extends readonly unknown[], Return>(
  fn: (...args: Args) => Promise<Return>,
  combineArgs: (args: Args, nextArgs: Args) => Args = (_, newArgs) => newArgs,
): (...args: Args) => Promise<Return> {

gvergnaud

/**
 * TIL that you can use try {} finally { cancelation() }
 * inside a generator function and call `.return()` on the generator
 * to run the cancelation of all generators currently running in the call stack!
 *
 * It means we can implement an Observable class with cancelation support
 * all with only generators:
 */

class Observable<T> {

gvergnaud

/**
 * Why?
 * - With LLMs we often need to parse partial JSON strings incrementally,
 *   as they are being generated.
 * - open-source Partial JSON parser all have problems:
 *   - They are ineficient: re-parsing the full JSON on each update
 *   - They don't stream updates of string values.
 *   - They don't guarantee that a given position in a JSON will remain of the same type.
 *
 * What is this?

gvergnaud

import React from "react";

/**
 * Hook to run effects related to a dom element.
 * Unlike useEffect, this hooks returns a ref callback.
 * The effect will be run every time the element changes.
 */
const useElementEffect = <T extends HTMLElement>(
  callback: (el: T) => (() => void) | undefined | void,
  deps: React.DependencyList,

gvergnaud

/**
 * Moveable tree.
 *
 * This implementation uses fractional indexing for children positions
 * and a parent id on the children for descendance.
 *
 * Pros:
 * - move operations are last-writer-wins.
 * - move operations can't produce duplicates.
 * - Can be built on top of existing last-writer-wins map crdts.

gvergnaud

import * as Y from 'yjs';

/**
 * In the current version of Yjs (13.x), there is a no
 * builtin way to create and apply a revert to undo an 
 * arbitrary change.
 * 
 * There are tricks to do it though, and they all revolve 
 * around the idea of using an `UndoManager` to undo a change,
 * and reading the `Uint8Array` update that has been applied by undoing.

gvergnaud

class EventEmitter<T extends object> {
    listeners: { [K in keyof T]?: Set<(data: T[K]) => void> } = {};
    on<K extends keyof T>(name: K, cb: (data: T[K]) => void) {
        const listeners = this.listeners[name] ?? new Set();
        listeners.add(cb);
        this.listeners[name] = listeners;
        return () => listeners.delete(cb);
    }
    emit<K extends keyof T>(name: K, data: T[K]) {
        const listeners = this.listeners[name] ?? new Set();

gvergnaud

package main

import (
	"fmt"
	"math/rand"
	"time"
)

func interval() chan float64 {
	channel := make(chan float64)

gvergnaud

import { EditorState, Step, Transaction } from 'prosemirror-model';

type TransactionCreator = (state: EditorState) => Transaction;

const rebaseSteps = (stepsToRebase: Step[], committedSteps: Step[]): Step[] => {
    if (!committedSteps.length) {
        return stepsToRebase;
    }

    const committedStepsMaps = committedSteps.map((s) => s.getMap());