astexplorer.json

{
  "v": 2,
  "parserID": "babylon7",
  "toolID": "babelv7",
  "settings": {
    "babylon7": null
  },
  "versions": {
    "babylon7": "7.0.0",
    "babelv7": "7.0.0"
  }
}

source.js

const insatiable = require('@tvui/insatiable');

const Header = insatiable(
    {
        textStyle: {
            size: 30,
            color: 'blue'
        }
    },
    ({ text, color }) => {
      return {
        text,
        textStyle: {
            color
        }
      };
    }
);

transform.js

export default function (babel) {
  const { types: t } = babel;
  
  return {
    visitor: {
      CallExpression(path) {
        if (path.get('callee.name').node !== 'insatiable') {
            return;
        }

        const staticStyle = path.get('arguments.0');
        const calculateStyle = path.get('arguments.1');
        const props = path.get('arguments.1.params.0.properties').map(p => p.node).map((n) => n.key.name);

        path.replaceWithSourceString(`
			(function createStyledComponent() {
				const staticStyle = ${staticStyle};
				const calculateStyle = ${calculateStyle};

				const Component = function(props) {
					return React.createElement(
						'widget',
						{
							staticStyle: staticStyle,
							style: calculateStyle(props)
						},
						props.children
					);
				};

				const areEqual = function(prevProps, nextProps) {
					return prevProps === nextProps || ${props.map((name) => `prevProps.${name} === nextProps.${name}`).join('&&')}
				}

				return React.memo(Component, areEqual);
			}())
		`);
      }
    }
  };
}