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 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.
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!