Merge pull request #24 from CodeshiftCommunity/emotion11

Adds codemod to migration from @emotion 10 to 11

Author: danieldelcore

community/@emotion_monorepo/11.0.0/motions/.gitkeep

@@ -0,0 +1,34 @@
+import { applyTransform } from '@codeshift/test-utils';
+import * as transformer from './transform';
+
+describe('@emotion@11.0.0 transform', () => {
+  it('should transform imports correctly', () => {
+    const result = applyTransform(
+      transformer,
+      `
+        import * as core from '@emotion/core';
+        import * as emotion from 'emotion';
+        import * as emotionTheming from 'emotion-theming';
+        import * as emotionServer from 'emotion-server';
+        import * as createEmotion from 'create-emotion';
+        import * as createEmotionServer from 'create-emotion-server';
+        import * as babelPlugin from 'babel-plugin-emotion';
+        import * as eslintPlugin from 'eslint-plugin-emotion';
+        import * as jestEmotion from 'jest-emotion';
+      `,
+      { parser: 'tsx' },
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "import * as core from \\"@emotion/react\\";
+              import * as emotion from \\"@emotion/css\\";
+              import * as emotionTheming from \\"@emotion/react\\";
+              import * as emotionServer from \\"@emotion/server\\";
+              import * as createEmotion from \\"@emotion/css/create-instance\\";
+              import * as createEmotionServer from \\"@emotion/server/create-instance\\";
+              import * as babelPlugin from \\"@emotion/babel-plugin\\";
+              import * as eslintPlugin from \\"@emotion/eslint-plugin\\";
+              import * as jestEmotion from \\"@emotion/jest\\";"
+    `);
+  });
+});

community/@emotion_monorepo/11.0.0/transform.spec.ts

@@ -0,0 +1,39 @@
+import { API, FileInfo, Options } from 'jscodeshift';
+import {
+  hasImportDeclaration,
+  renameImportDeclaration,
+} from '@codeshift/utils';
+
+const importMap = {
+  '@emotion/core': '@emotion/react',
+  emotion: '@emotion/css',
+  'emotion-theming': '@emotion/react',
+  'emotion-server': '@emotion/server',
+  'create-emotion': '@emotion/css/create-instance',
+  'create-emotion-server': '@emotion/server/create-instance',
+  'babel-plugin-emotion': '@emotion/babel-plugin',
+  'eslint-plugin-emotion': '@emotion/eslint-plugin',
+  'jest-emotion': '@emotion/jest',
+};
+
+export default function transformer(
+  file: FileInfo,
+  { jscodeshift: j }: API,
+  options: Options,
+) {
+  const source = j(file.source);
+
+  if (
+    !Object.keys(importMap).some(importSource =>
+      hasImportDeclaration(j, source, importSource),
+    )
+  ) {
+    return file.source;
+  }
+
+  Object.entries(importMap).forEach(([key, value]) =>
+    renameImportDeclaration(j, source, key, value),
+  );
+
+  return source.toSource(options.printOptions);
+}

community/@emotion_monorepo/11.0.0/transform.ts

@@ -0,0 +1,6 @@
+export default {
+  maintainers: ['danieldelcore'],
+  transforms: {
+    '11.0.0': require('./11.0.0/transform'),
+  },
+};

community/@emotion_monorepo/codeshift.config.js

@@ -2,10 +2,6 @@ import fs from 'fs-extra';
 import semver from 'semver';
 import * as recast from 'recast';
 
-function transformPackageName(packageName: string) {
-  return packageName.replace('/', '__');
-}
-
 function main(packageName: string, version: string) {
   if (!packageName) throw new Error('Package name was not provided');
   if (!version) throw new Error('Version was not provided');
@@ -17,23 +13,30 @@ function main(packageName: string, version: string) {
   }
 
   const communityDirectoryPath = `${__dirname}/../../../community`;
-  const safePackageName = transformPackageName(packageName);
+  const safePackageName = packageName.replace('/', '__');
   const codemodBasePath = `${communityDirectoryPath}/${safePackageName}`;
   const codemodPath = `${codemodBasePath}/${version}`;
   const configPath = `${codemodBasePath}/codeshift.config.js`;
-  const testsPath = `${codemodPath}/_tests_`;
   const motionsPath = `${codemodPath}/motions`;
 
   fs.mkdirSync(codemodPath, { recursive: true });
+
+  fs.copyFileSync(
+    `${__dirname}/../template/transform.spec.ts`,
+    `${codemodPath}/transform.spec.ts`,
+  );
+  fs.copyFileSync(
+    `${__dirname}/../template/transform.ts`,
+    `${codemodPath}/transform.ts`,
+  );
   fs.copySync(`${__dirname}/../template/motions`, motionsPath);
-  fs.copySync(`${__dirname}/../template/_tests_`, testsPath);
 
   const testFile = fs
-    .readFileSync(`${testsPath}/transform.spec.ts`, 'utf8')
+    .readFileSync(`${codemodPath}/transform.spec.ts`, 'utf8')
     .replace('<% packageName %>', packageName)
     .replace('<% version %>', version);
 
-  fs.writeFileSync(`${testsPath}/transform.spec.ts`, testFile);
+  fs.writeFileSync(`${codemodPath}/transform.spec.ts`, testFile);
 
   if (!fs.existsSync(configPath)) {
     fs.writeFileSync(
@@ -86,11 +89,6 @@ function main(packageName: string, version: string) {
     );
   }
 
-  fs.copyFileSync(
-    `${__dirname}/../template/transform.ts`,
-    `${codemodPath}/transform.ts`,
-  );
-
   console.log(
     `🚚 New codemod package created at: community/${safePackageName}/${version}`,
   );

packages/initializer/src/index.ts

@@ -1,5 +1,5 @@
 import { applyTransform } from '@codeshift/test-utils';
-import * as transformer from '../transform';
+import * as transformer from './transform';
 
 describe('<% packageName %>@<% version %> transform', () => {
   it('should transform correctly', () => {

packages/initializer/template/_tests_/transform.spec.ts renamed to packages/initializer/template/transform.spec.ts

@@ -1,11 +1,11 @@
 import { API, FileInfo, Options } from 'jscodeshift';
 
 export default function transformer(
-  fileInfo: FileInfo,
+  file: FileInfo,
   { jscodeshift: j }: API,
   options: Options,
 ) {
-  const source = j(fileInfo.source);
+  const source = j(file.source);
 
   /**
    * Early exit condition
@@ -16,7 +16,7 @@ export default function transformer(
    * https://codeshiftcommunity.github.io/CodeshiftCommunity/docs/your-first-codemod#output
    */
   if (/* Some condition here */ true) {
-    return fileInfo.source;
+    return file.source;
   }
 
   /**

packages/initializer/template/transform.ts

@@ -32,6 +32,18 @@ export function removeImportDeclaration(
   getImportDeclaration(j, source, sourcePath).remove();
 }
 
+export function renameImportDeclaration(
+  j: core.JSCodeshift,
+  source: Collection<any>,
+  sourcePath: string,
+  newSourcePath: string,
+) {
+  getImportDeclaration(j, source, sourcePath).forEach(
+    importDeclaration =>
+      (importDeclaration.node.source = j.stringLiteral(newSourcePath)),
+  );
+}
+
 export function getDefaultImportSpecifier(
   j: core.JSCodeshift,
   source: Collection<any>,

packages/utils/src/imports.ts

@@ -85,6 +85,33 @@ removeImportDeclaration(j, source, 'react');
 -import React, { useEffect } from 'react';
 ```
 
+### `renameImportDeclaration(j, source, sourcePath, newSourcePath)`
+
+Renames an import declaration by source name
+
+**Returns**
+
+`void`
+
+**Example**
+
+```jsx
+// src/App.js
+import React from 'react';
+```
+
+```js
+import { renameImportDeclaration } from '@codeshift/utils';
+
+renameImportDeclaration(j, source, 'react', 'preact');
+```
+
+```diff
+// src/App.js
+-import React, { useEffect } from 'react';
++import React, { useEffect } from 'preact';
+```
+
 ### `getDefaultImportSpecifier(j, source, sourcePath)`
 
 Finds a default import specifier