JSFiddle - React, Tailwind, and code Playground

by mcsf

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>

Babel + JSX

const { memoize } = _
woot = (label) => console.log('woot', label)

computeSiteAttrs = (id) => ({
	siteAttr1: 'foo'+id+woot('site'+id),
  siteAttr2: 'bar'+id,
})

computeWordAdsAttrs = memoize((id) => ({
  wordAdAttr1: 'foo'+id+woot('ads'+id),
  wordAdAttr2: 'bar'+id,
}))

getSite = memoize((id) => {
	const site = {
    id,
    ...computeSiteAttrs(id),
  }
  
  Object.defineProperty(site, 'wordAds', {
  	get() { return computeWordAdsAttrs(id) }
  })
  
  return site
})

getSite(42).id
getSite(42).id
getSite(45).wordAds
getSite(45).wordAds

const mySite = getSite(42)
console.log(JSON.stringify(mySite))
console.log(mySite.wordAds)
console.log(JSON.stringify(mySite))