ID Builder

The ID Builder is used to convert a field path into an input ID (and name).

type Path = Array<string | number>;
type RPath = Readonly<Path>;
type FieldPath = Brand<"sjsf-path", RPath>;

interface IdentifiableFieldElement {
  help: {};
  "key-input": {};
  examples: {};
  title: {};
  description: {};
  errors: {};
  oneof: {};
  anyof: {};
  form: {};
  submit: {};
}

type FieldPseudoElement = keyof IdentifiableFieldElement | number;

interface FormIdBuilder {
  fromPath: (path: FieldPath) => string;
}

Modern ID Builder implementation:

import {
  DEFAULT_ID_PREFIX,
  decodePseudoElement,
  type FieldPath,
  type FormIdBuilder,
} from "@/form/main.js";

export interface IdOptions {
  idPrefix?: string;
  separator?: string;
}

export const DEFAULT_SEPARATOR = "_";

export function createFormIdBuilder({
  idPrefix = DEFAULT_ID_PREFIX,
  separator = DEFAULT_SEPARATOR,
}: IdOptions = {}): FormIdBuilder {
  return {
    fromPath: (path: FieldPath) => {
      let str = "";
      for (let i = 0; i < path.length; i++) {
        const p = path[i]!;
        const pseudo = decodePseudoElement(p);
        str +=
          pseudo !== undefined
            ? `${separator}${separator}${pseudo}`
            : `${separator}${p}`;
      }
      return `${idPrefix}${str}`;
    },
  };
}