reactive.md

Clamped Value

Idealized syntax:

component ClampedValue {
  in min: number;
  in max: number;
  
  out value = clamp(min, prev value ?? 0, max);
}

TypeScript if decorators didn't suck:

@component
class ClampedValue {
  @input min: number;
  @input max: number;
  
  @computed value = ({ min, max }, prev) =>
    clamp(min, prev ?? 0, max);
}

Current TypeScript:

type ClampedValue = Component<typeof ClampedValue>;
const ClampedValue = component(
    class {
        min = input<number>();
        max = input<number>();

        value = computed<this, number>(
            ({ min, max }, prev) => clamp(min, prev ?? 0, max)
        );
    }
)