En este artículo, analizamos la clase DefaultMap en el código fuente CSS de Tailwind. Este es un mapa que puede generar valores predeterminados para claves que no existen. Los valores predeterminados generados se agregan al mapa para evitar volver a calcularlos.

/**
 * A Map that can generate default values for keys that don't exist.
 * Generated default values are added to the map to avoid recomputation.
 */
export class DefaultMap extends Map {
  constructor(private factory: (key: T, self: DefaultMap) => V) {
    super()
  }

  get(key: T): V {
    let value = super.get(key)

    if (value === undefined) {
      value = this.factory(key, this)
      this.set(key, value)
    }

    return value
  }
}

En JavaScript, tenemos una API de mapas pero no existe un mapa predeterminado. Este DefaultMap es una clase personalizada que extiende Map en el código fuente CSS de Tailwind.

Entendamos este código.

constructor(private factory: (key: T, self: DefaultMap) => V) {
    super()
}

DefaultMap es una clase que tiene un constructor que espera una función de fábrica. super() llama al constructor de la clase principal, en este caso, esta es Map API y el segundo parámetro de la función de fábrica es self: DefaultMap, lo que significa que tiene acceso a la instancia de Map.

¿Cómo se inicializa DefaultMap?

Busquemos un ejemplo donde se inicializa este DefaultMap. design-system.ts demuestra el uso de DefaultMap.

let parsedVariants = new DefaultMap(
                        (variant) => parseVariant(variant, designSystem)
                     );

Aquí (variant) => parseVariant(variant, designSystem) se convierte en nuestro método de fábrica que agrega un valor predeterminado si una clave no existe.

return {
      kind: 'arbitrary',
      selector,
      compounds: true,
      relative,
  }

Este es el valor devuelto por la función parseVariant.

Sobre nosotros:

En Think Throo, tenemos la misión de enseñar los conceptos arquitectónicos avanzados de base de código utilizados en proyectos de código abierto.

10 veces tus habilidades de codificación practicando conceptos arquitectónicos avanzados en Next.js/React, aprende las mejores prácticas y crea proyectos de nivel de producción.

Somos de código abierto: https://github.com/thinkthroo/thinkthroo (¡Danos una estrella!)

También brindamos servicios de desarrollo web y redacción técnica. Comuníquese con nosotros en [email protected] para obtener más información.

Referencias:

1. https://github.com/tailwindlabs/tailwindcss/blob/next/packages/tailwindcss/src/utils/default-map.ts#L5

2. https://github.com/tailwindlabs/tailwindcss/blob/c01b8254e822d4f328674357347ca0532f1283a0/packages/tailwindcss/src/design-system.ts#L40

3. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

4. https://github.com/tailwindlabs/tailwindcss/blob/c01b8254e822d4f328674357347ca0532f1283a0/packages/tailwindcss/src/candidate.ts#L511-L516