DefaultMap class in TailwindCSS source code.

In this article, we analyse DefaultMap class in Tailwind CSS source code. This is a map that can generate default values for keys that don’t exist. Generated default values are added to the map to avoid re-computation.

/**
* A Map that can generat…


This content originally appeared on DEV Community and was authored by thinkThroo

In this article, we analyse DefaultMap class in Tailwind CSS source code. This is a map that can generate default values for keys that don’t exist. Generated default values are added to the map to avoid re-computation.


/**
 * 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<T = string, V = any> extends Map<T, V> {
  constructor(private factory: (key: T, self: DefaultMap<T, V>) => 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
  }
}

In JavaScript, we have a Map API but there is no DefaultMap. This DefaultMap is a custom class that extends Map in Tailwind CSS source code.

Let’s understand this code.

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

DefaultMap is a class that has a constructor that expects a factory function. super() calls the parent class’s constructor, in this case, this is Map API and factory function’s second parameter is self: DefaultMap<T, V> which means it has access to Map instance.

How DefaultMap is initialized?

Let’s find an example where this DefaultMap is initialised. design-system.ts desmonstrates usage of DefaultMap.

Image description

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

Here (variant) => parseVariant(variant, designSystem) becomes our factory method that adds a default if a key does not exist.

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

This is the value returned by parseVariant function.

About us:

At Think Throo, we are on a mission to teach the advanced codebase architectural concepts used in open-source projects.

10x your coding skills by practising advanced architectural concepts in Next.js/React, learn the best practices and build production-grade projects.

We are open source — https://github.com/thinkthroo/thinkthroo (Do give us a star!)

We also provide web development and technical writing services. Reach out to us at hello@thinkthroo.com to learn more!

References:

  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




This content originally appeared on DEV Community and was authored by thinkThroo


Print Share Comment Cite Upload Translate Updates
APA

thinkThroo | Sciencx (2024-10-09T18:54:17+00:00) DefaultMap class in TailwindCSS source code.. Retrieved from https://www.scien.cx/2024/10/09/defaultmap-class-in-tailwindcss-source-code/

MLA
" » DefaultMap class in TailwindCSS source code.." thinkThroo | Sciencx - Wednesday October 9, 2024, https://www.scien.cx/2024/10/09/defaultmap-class-in-tailwindcss-source-code/
HARVARD
thinkThroo | Sciencx Wednesday October 9, 2024 » DefaultMap class in TailwindCSS source code.., viewed ,<https://www.scien.cx/2024/10/09/defaultmap-class-in-tailwindcss-source-code/>
VANCOUVER
thinkThroo | Sciencx - » DefaultMap class in TailwindCSS source code.. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/10/09/defaultmap-class-in-tailwindcss-source-code/
CHICAGO
" » DefaultMap class in TailwindCSS source code.." thinkThroo | Sciencx - Accessed . https://www.scien.cx/2024/10/09/defaultmap-class-in-tailwindcss-source-code/
IEEE
" » DefaultMap class in TailwindCSS source code.." thinkThroo | Sciencx [Online]. Available: https://www.scien.cx/2024/10/09/defaultmap-class-in-tailwindcss-source-code/. [Accessed: ]
rf:citation
» DefaultMap class in TailwindCSS source code. | thinkThroo | Sciencx | https://www.scien.cx/2024/10/09/defaultmap-class-in-tailwindcss-source-code/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.