stringify-accessor v1.0.2

stringify-accessor

Typesafe, runtime stringification of property accessor paths powered by ES6 Proxies

Install

npm i stringify-accessor

Usage

import stringifyAccessor from "stringify-accessor";

interface FormFields {
  name: {
    first: string;
    last: string;
    suffix?: string;
  };
  favoriteColors?: {
    hex: string;
    name: string;
  }[];
}

stringifyAccessor<FormFields>((form) => form.favoriteColors?.[0].hex); //=> favoriteColors[0].hex

Example: Typesafe form input names

import { set } from "lodash";
import stringifyAccessor from "stringify-accessor";

interface FormFields {
  name: {
    first: string;
    last: string;
    suffix?: string;
  };
  favoriteColors?: {
    hex: string;
    name: string;
  }[];
}

export function MyForm() {
  function processForm(
    e: Event & {
      currentTarget: HTMLFormElement;
    }
  ) {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    const form = {};

    for (const [key, value] of formData.entries()) {
      set(form, key, value);
    }

    return form as FormFields;
  }
  const favoriteColors: NonNullable<FormFields['favoriteColors']> = [{ hex: "", name: "" }, { hex: "", name: "" }]

  return (
    <form onSubmit={e => {
        const form = processForm(e);
        console.log(form); //=> { name: { first: "", last: "", suffix: "" }, favoriteColors: [{ hex: "", name: "" }, { hex: "", name: "" }] }
    }}>
      <input
        name={stringifyAccessor<FormFields>((form) => form.name.first)}
        type="text"
      />
      <input
        name={stringifyAccessor<FormFields>((form) => form.name.last)}
        type="text"
      />
      <input
        name={stringifyAccessor<FormFields>((form) => form.name?.suffix)}
        type="text"
      />
      <p>List your two favorite colors</p>
      <ul>
          {favoriteColors.map((color, i) => (
              <li>
                  <input
                      name={stringifyAccessor<FormFields>(
                          (form) => form.favoriteColors?.[i].hex
                      )}
                      type="color"
                      value={color.hex}
                  />
                  <input
                      name={stringifyAccessor<FormFields>(
                          (form) => form.favoriteColors?.[i].name
                      )}
                      type="text"
                      value={color.name}
                  />
              </li>
          ))}
      </ul>
      <button type="submit">submit</button>
    </form>
  );
}

Benchmarking

All benchmarks were run on a 2017 Macbook Pro with macOS Ventura 13.6.9, 2.9 GHz Quad-Core Intel Core i7.

Without caching

With caching

The stringifyAccessor function doesn't use caching, but it can be trivially added. There is a reference memoization implementation using Map in memoized.benchmark.ts.