Get value

Benchmark created on

Setup

window.tokenValues = new Map([
   [ 'c23e58d8', '0px' ], [ 'a5c6b067', '1px' ], [ '8c626471', '2px' ],
  [ '1e960d84', '3px' ], [ 'bd21b7e6', '4px' ], [ 'bedd81dc', '5px' ],
  [ 'a9e43e61', '6px' ], [ 'a98a87cd', '7px' ], [ '64a68925', '8px' ],
  [ '16f4a4c1', '0px' ], [ '44647fd7', '1px' ], [ '8423dc0e', '2px' ],
  [ 'e2fa1334', '3px' ], [ 'ef230b51', '4px' ], [ 'ffc3112f', '55px' ],
  [ 'b337e22e', '6px' ], [ 'c750b4ee', '7px' ], [ 'ec3cb4f3', '8px' ],
  [ 'bd5d007c', '0px' ], [ 'ca69a437', '1px' ], [ 'face2db2', '2px' ],
  [ 'd551d814', '3px' ], [ '9040057d', '4px' ], [ '416ece6a', '5px' ],
  [ '41598979', '6px' ], [ 'fa286ea2', '7px' ], [ 'c269b8ad', '8px' ],
  [ '0e0a8731', '0px' ], [ 'a05fe26b', '1px' ], [ 'ebb43f2f', '2px' ],
  [ '193dc679', '3px' ], [ '14efb620', '4px' ], [ '8bd1546b', '5px' ],
])

const TOKEN_REFERENCE_PREFIX = 'tokens/'
const TOKEN_PREFIX_LENGTH = TOKEN_REFERENCE_PREFIX.length

window.isTokenReference = (s) => {
	return typeof s === 'string' && s.startsWith(TOKEN_REFERENCE_PREFIX)
}

window.parseTokenReference = (s) => {
	return { id: s.substring(TOKEN_PREFIX_LENGTH) }
}

function getLengthValue(tokenValues, id) {
  const value = tokenValues.get(id)
  if (typeof value !== 'string') {
    return undefined
  }

  return value
}


window.coerceToPx = (value) => {
  if (typeof value === 'string') {
    return value
  }

  if (!isNaN(value)) {
    return `${value}px`
  }

  return '0px'
}

window.defaultTheme = {
	borderRadius: '4px'
}

window.getValuePrevious = (defaultValue, theme) => {
	return coerceToPx(theme[defaultValue])
}

window.getValueUpdated = (defaultValue, theme) => {
	    let value = theme[defaultValue]
    if (isTokenReference(value)) {
      const { id } = parseTokenReference(value)
      // defaultNumber currently only used for border radius
      value = getLengthValue(tokenValues, id) ?? defaultTheme[defaultValue]
    }
    return coerceToPx(value)
}

Test runner

Ready to run.

Testing in
TestOps/sec
Current implementation
const ret = getValuePrevious('borderRadius', { borderRadius: '5px' })
// console.log(ret)
ready
Token values deref
const ret = getValueUpdated('borderRadius', { borderRadius: 'tokens/ffc3112f' })
// console.log(ret)
ready
Token values no hit
const ret = getValueUpdated('borderRadius', { borderRadius: '3px' })
// console.log(ret)
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.