javascript Codemod用于样式组件V4从injectGlobal迁移到createClobalStyle

Posted 2021-05-03

const importRenameMap = {
  injectGlobal: 'createGlobalStyle'
};

module.exports = function transformer(file, api) {
  const j = api.jscodeshift;
  let source = file.source;

  source = renameInjectGlobalImportWithCreateGlobal(j, j(source)).toSource();
  source = renameTagTemplate(j, j(source)).toSource();

  return source;
};

/**
 * Renames "injectGlobal" import specifier to "createGlobalStyle"
 * @param {*} j - jscodeshift API
 * @param {*} source - jscodeshift source
 */
const renameInjectGlobalImportWithCreateGlobal = (j, source) => {
  return source
    .find(j.ImportSpecifier)
    .filter(identifier => !!importRenameMap[identifier.value.imported.name])
    .replaceWith(identifier =>
      j.importSpecifier(
        j.identifier(importRenameMap[identifier.node.local.name])
      )
    );
};

/**
 * Rename the previous injectGlobal literal to createGlobalStyle
 * TODO: create GlobalStyle const
 * @param {*} j - jscodeshift API
 * @param {*} source - jscodeshift source
 */
const renameTagTemplate = (j, source) => {
  return source
    .find(j.TaggedTemplateExpression)
    .filter(identifier => !!importRenameMap[identifier.node.tag.name])
    .replaceWith(identifier => {
      identifier.node.tag.name = importRenameMap[identifier.node.tag.name];
      return identifier.node;
      /*
      * I'm stuck here, creating the export const GlobalStyle with the tagged template expression.
      * AST Explorer: https://astexplorer.net/#/gist/5814fc5cb76165cc3dd393a63200fa31/0a242578a790b54c40584d7195cd54009987b3fa
      */
      // const globalStyle = j.identifier('GlobalStyle');
      // globalStyle.init = identifier.node;
      // return j.exportNamedDeclaration(
      //   j.variableDeclaration('const', globalStyle)
      // );
    });
};