Dans cet article, nous analysons la classe DefaultMap dans le code source CSS Tailwind. Il s'agit d'une carte qui peut générer des valeurs par défaut pour des clés qui n'existent pas. Les valeurs par défaut générées sont ajoutées à la carte pour éviter un nouveau calcul.

/**
 * 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, nous avons une API Map mais il n'y a pas de DefaultMap. Ce DefaultMap est une classe personnalisée qui étend Map dans le code source CSS Tailwind.

Comprenons ce code.

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

DefaultMap est une classe qui a un constructeur qui attend une fonction d'usine. super() appelle le constructeur de la classe parent, dans ce cas, il s'agit de l'API Map et le deuxième paramètre de la fonction d'usine est self : DefaultMap ce qui signifie qu'il a accès à l'instance Map.

Comment DefaultMap est-il initialisé ?

Trouvons un exemple où ce DefaultMap est initialisé. design-system.ts montre l'utilisation de DefaultMap.

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

Ici (variant) => parseVariant(variant, designSystem) devient notre méthode d'usine qui ajoute une valeur par défaut si une clé n'existe pas.

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

Il s'agit de la valeur renvoyée par la fonction parseVariant.

À propos de nous:

Chez Think Throo, nous avons pour mission d'enseigner les concepts architecturaux avancés de base de code utilisés dans les projets open source.

10x vos compétences en codage en pratiquant des concepts architecturaux avancés dans Next.js/React, apprenez les meilleures pratiques et créez des projets de niveau production.

Nous sommes open source — https://github.com/thinkthroo/thinkthroo (Donnez-nous une étoile !)

Nous fournissons également des services de développement Web et de rédaction technique. Contactez-nous à [email protected] pour en savoir plus !

Références :

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