Run results for: case native vs custom

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Safari/537.36

Browser: Chrome 92

Operating system: Linux

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
custom	5731506.5 Ops/sec
native	3398209.0 Ops/sec

Script Preparation code:

const NS = "dhx"

const BUTTON = `${NS}_button`
const BUTTON_DANGER = `${NS}_button--color_danger`
const BUTTON_SECONDARY = `${NS}_button--color_secondary`
const BUTTON_PRIMARY = `${NS}_button--color_primary`
const BUTTON_SUCCESS = `${NS}_button--color_success`
const BUTTON_SMALL = `${NS}_button--size_small`
const BUTTON_MEDIUM = `${NS}_button--size_medium`
const BUTTON_FLAT = `${NS}_button--view_flat`
const BUTTON_LINK = `${NS}_button--view_link`
const BUTTON_FULL = `${NS}_button--width_full`
const BUTTON_CIRCLE = `${NS}_button--circle`
const BUTTON_LOADING = `${NS}_button--loading`
const BUTTON_ICON = `${NS}_button--icon`

function custom(props) {
    let css = `${BUTTON} `

    switch (props.color) {
        case "danger":
            css += BUTTON_DANGER;
            break
        case "secondary":
            css += BUTTON_SECONDARY;
            break
        case "primary":
            css += BUTTON_PRIMARY;
            break
        case "success":
            css += BUTTON_SUCCESS;
            break
    }
    css += " "

    if (props.size === "small") {
        css += BUTTON_SMALL
    } else {
        css += BUTTON_MEDIUM
    }
    css += " "

    if (props.view === "flat") {
        css += BUTTON_FLAT
    } else {
        css += BUTTON_LINK
    }
    css += " "

    if (props.full) css += ` ${BUTTON_FULL}`
    if (props.circle) css += ` ${BUTTON_CIRCLE}`
    if (props.loading) css += ` ${BUTTON_LOADING}`
    if (props.icon) css += ` ${BUTTON_ICON}`

    return css;
}

function native(props) {
    const colorsCss = {
        danger: " dhx_button--color_danger",
        secondary: " dhx_button--color_secondary",
        primary: " dhx_button--color_primary",
        success: " dhx_button--color_success",
    } [props.color] || " dhx_button--color_primary"

    const sizeCss = {
        small: " dhx_button--size_small",
        medium: " dhx_button--size_medium",
    } [props.size] || " dhx_button--size_medium"

    const viewCss = {
        flat: " dhx_button--view_flat",
        link: " dhx_button--view_link",
    } [props.view] || " dhx_button--view_flat"

    const fullCss = props.full ? " dhx_button--width_full" : ""
    const circleCss = props.circle ? " dhx_button--circle" : ""
    const loadingCss = props.loading ? " dhx_button--loading" : ""
    const iconViewCss = props.icon && !props.text ? " dhx_button--icon" : ""

    return `dhx_button${colorsCss}${sizeCss}${viewCss}${fullCss}${circleCss}${loadingCss}${iconViewCss}`
}

Tests:

custom
const cls = custom({color: "danger"})
native
const cls = native({color: "danger"})