Neste artigo, analisamos a classe DefaultMap no código-fonte CSS do Tailwind. Este é um mapa que pode gerar valores padrão para chaves que não existem. Os valores padrão gerados são adicionados ao mapa para evitar recálculo.

/**
 * 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
  }
}

Em JavaScript, temos uma API de mapa, mas não há DefaultMap. Este DefaultMap é uma classe personalizada que estende o mapa no código-fonte CSS do Tailwind.

Vamos entender esse código.

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

DefaultMap é uma classe que possui um construtor que espera uma função de fábrica. super() chama o construtor da classe pai, neste caso, esta é a API do Mapa e o segundo parâmetro da função de fábrica é self: DefaultMap o que significa que ele tem acesso à instância do Mapa.

Como o DefaultMap é inicializado?

Vamos encontrar um exemplo onde este DefaultMap é inicializado. design-system.ts demonstra o uso do DefaultMap.

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

Aqui (variant) => parseVariant(variant, designSystem) se torna nosso método de fábrica que adiciona um padrão se uma chave não existir.

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

Este é o valor retornado pela função parseVariant.

Sobre nós:

No Think Throo, temos a missão de ensinar os conceitos avançados de arquitetura de base de código usados ​​em projetos de código aberto.

10x suas habilidades de codificação praticando conceitos de arquitetura avançados em Next.js/React, aprenda as melhores práticas e crie projetos de nível de produção.

Somos código aberto - https://github.com/thinkthroo/thinkthroo (Dê-nos uma estrela!)

Também fornecemos serviços de desenvolvimento web e redação técnica. Entre em contato conosco em [email protected] para saber mais!

Referências:

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