provide example on how to manipulate custom template props

[headfire94]

🚀 Feature Proposal

There is lack of custom template examples, for example how to generate component that accepts size props and applies it to both width and height

[iAmMuneeb]

@headfire94 were you able to figure it out?

[headfire94]

@iAmMuneeb not i use kinda ugly solution:

module.exports = ({ componentName, props, jsx, imports, interfaces, exports }, { tpl }) => {
  // Find or create the width and height attributes in the jsx object

  const reactImport = `import React from 'react'`
  const widthAttribute = jsx.openingElement.attributes.find((attr) => attr.name.name === 'width')
  const heightAttribute = jsx.openingElement.attributes.find((attr) => attr.name.name === 'height')
  const widthValue = widthAttribute?.value?.expression?.value || 24
  const heightValue = heightAttribute?.value?.expression?.value || 24

  if (widthAttribute) {
    widthAttribute.value = {
      type: 'JSXExpressionContainer',
      expression: { type: 'Identifier', name: 'width' },
    }
  } else {
    jsx.openingElement.attributes.push({
      type: 'JSXAttribute',
      name: { type: 'JSXIdentifier', name: 'width' },
      value: { type: 'JSXExpressionContainer', expression: { type: 'Identifier', name: 'width' } },
    })
  }

  if (heightAttribute) {
    heightAttribute.value = {
      type: 'JSXExpressionContainer',
      expression: { type: 'Identifier', name: 'height' },
    }
  } else {
    jsx.openingElement.attributes.push({
      type: 'JSXAttribute',
      name: { type: 'JSXIdentifier', name: 'height' },
      value: { type: 'JSXExpressionContainer', expression: { type: 'Identifier', name: 'height' } },
    })
  }

  const widthExp = `const width = size || props.width || ${widthValue};`
  const heightExp = `const height = size || props.height || ${heightValue};`
  return tpl`
${reactImport}
${imports}
${interfaces}

function ${componentName}({ size, ...props }) {
  ${widthExp}
  ${heightExp}

  return ${jsx};
}

export default React.memo(${componentName})
  `
}

[mrdulin]

+1

Besides, I also want to know how to use external CSS style instead of inline style for the React Element