For example we have following code:
$(el).hide() // el.style.display = 'none' $(el).forEach(() => {}) foo.hide()
We want
$(el).hide()
replace with:
el.style.display = 'none'
Plugin:
export default function (babel) { const { types: t, template } = babel; return { name: "ast-transform", // not required visitor: { CallExpression(path) { const isJqueryCallExpression = looksLike(path, { node: { callee: { name: '$' } }, parent: { type: "MemberExpression", property: { name: 'hide' } } }); if (!isJqueryCallExpression) { return } const overallPath = path.parentPath.parentPath; const templateString = `EL.style.display = 'none';` const assignmentBuilder = template(templateString) const assignment = assignmentBuilder({ EL: t.identifier(path.node.arguments[0].name) }) overallPath.replaceWith(assignment) } } }; } function looksLike(a, b) { return ( a && b && Object.keys(b).every(bKey => { const bVal = b[bKey] const aVal = a[bKey] if (typeof bVal === 'function') { return bVal(aVal) } return isPrimitive(bVal) ? bVal === aVal : looksLike(aVal, bVal) }) ) } function isPrimitive(val) { return val == null || /^[sbn]/.test(typeof val) }