How I can remove the dot when I want to edit a react compound component with the jscodeshift library?

Question

I have a small project and I want to pass from <ThemeContext.Provider /> to <ThemeProvider />. but when I tried I got <ThemeProvider. /> (with an extra dot!!!)

Here is an example: https://astexplorer.net/#/gist/e06688772514aefc6e776a6a0031dbf5/eb8bf6546886b2ea2f2bf5bf425ebe024f49d217

Answer 1

You can try to find all JSXMemberExpression which effectively corresponds to having Foo.Bar in opening or closing element JSXBoundaryElement name. Filter those accessing ThemeContext. And then replace them with identifier

source
    .find(j.JSXMemberExpression)
    .filter((path) => path.value.object.name === "ThemeContext")
    .forEach((path) => {
      j(path).replaceWith(j.identifier("ThemeProvider"));
    });