feat: add makeStylesImport, withStylesImport options

fix #2

README.md

@@ -59,6 +59,19 @@ You can also configure this by adding the following to your `package.json`:
 }
 ```
 
+### `makeStylesImport` (_optional_)
+
+Overrides the `import` statement added by `useStyles` for importing `makeStyles`.
+You can also configure this by adding the following to your `package.json`:
+
+```json
+{
+  "material-ui-codemorphs": {
+    "makeStylesImport": "import { makeStyles } from '@material-ui/core'"
+  }
+}
+```
+
 ## Flow Example
 
 ### Before
@@ -171,6 +184,19 @@ You can also configure this by adding the following to your `package.json`:
 }
 ```
 
+### `withStylesImport` (_optional_)
+
+Overrides the `import` statement added by `useStyles` for importing `withStyles`.
+You can also configure this by adding the following to your `package.json`:
+
+```json
+{
+  "material-ui-codemorphs": {
+    "withStylesImport": "import { withStyles } from '@material-ui/core'"
+  }
+}
+```
+
 ## Flow example
 
 ### Before

src/setupSystem.spec.ts

@@ -26,7 +26,8 @@ const Bar = () => <Box boxShadow={1} />
       source,
     }
     const api = {
-      jscodeshift: j.withParser('babel'),
+      j: j.withParser('babylon'),
+      jscodeshift: j.withParser('babylon'),
       stats,
       report: process.stdout.write.bind(process.stdout),
     }
@@ -58,6 +59,7 @@ const Bar = () => <Box boxShadow={1} />
       source,
     }
     const api = {
+      j: j.withParser('babel'),
       jscodeshift: j.withParser('babel'),
       stats,
       report: process.stdout.write.bind(process.stdout),
@@ -84,6 +86,7 @@ const Foo = () => <Box marginLeft={2} />
       source,
     }
     const api = {
+      j: j.withParser('babel'),
       jscodeshift: j.withParser('babel'),
       stats,
       report: process.stdout.write.bind(process.stdout),
@@ -114,6 +117,7 @@ const Foo = () => <Box marginLeft={2} />
       source,
     }
     const api = {
+      j: j.withParser('babel'),
       jscodeshift: j.withParser('babel'),
       stats,
       report: process.stdout.write.bind(process.stdout),
@@ -140,6 +144,7 @@ const Bar = () => <Box boxShadow={1} />
       source,
     }
     const api = {
+      j: j.withParser('babel'),
       jscodeshift: j.withParser('babel'),
       stats,
       report: process.stdout.write.bind(process.stdout),
@@ -169,6 +174,7 @@ const Bar = () => <Box boxShadow={1} />
       source,
     }
     const api = {
+      j: j.withParser('tsx'),
       jscodeshift: j.withParser('tsx'),
       stats,
       report: process.stdout.write.bind(process.stdout),

src/setupSystem.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import { JSCodeshift } from 'jscodeshift'
+import { FileInfo, API } from 'jscodeshift'
 import addImports from 'jscodeshift-add-imports'
 import pipeline from './util/pipeline'
 import { uniq, map, compact, flatMap } from 'lodash/fp'
@@ -31,8 +31,8 @@ const getSystemImports = (dir: string): Record<string, string> => {
 }
 
 module.exports = function setupMaterialUISystem(
-  { path, source }: { path: string; source: string },
-  { jscodeshift: j }: { jscodeshift: JSCodeshift }
+  { path, source }: FileInfo,
+  { j }: API
 ): string {
   const root = j(source)
   const { statement } = j.template

src/useStyles.ts

@@ -1,68 +1,49 @@
 import addImports from 'jscodeshift-add-imports'
 import {
-  ASTPath,
-  Node,
-  JSCodeshift,
   ExportDefaultDeclaration,
   FunctionDeclaration,
   ArrowFunctionExpression,
   ExportNamedDeclaration,
   Statement,
   Identifier,
   FunctionExpression,
+  FileInfo,
+  API,
 } from 'jscodeshift'
 import { Collection } from 'jscodeshift/src/Collection'
-import pathsInRange from 'jscodeshift-paths-in-range'
-import importTheme from './util/importTheme'
-import getStylesPackage from './util/getStylesPackage'
-
-type Filter = (
-  path: ASTPath<Node>,
-  index: number,
-  paths: Array<ASTPath<Node>>
-) => boolean
+import { getFilter } from './util/filter'
+import getImports from './util/getImports'
+import hasFlowAnnotation from './util/hasFlowAnnotation'
 
 module.exports = function addStyles(
-  fileInfo: { path: string; source: string },
-  api: {
-    jscodeshift: JSCodeshift
-    stats: (value: string) => void
-    report: (value: string) => void
-  },
+  fileInfo: FileInfo,
+  api: API,
   options: {
     selectionStart?: string
     selectionEnd?: string
     themeImport?: string
   }
 ): string {
-  const j = api.jscodeshift
+  const { j } = api
 
   const { statement } = j.template
   const root = j(fileInfo.source)
+  const isFlow = hasFlowAnnotation(root)
+  const isTypeScript = /\.tsx?$/i.test(fileInfo.path)
 
-  let filter: Filter
-  if (options.selectionStart) {
-    const selectionStart = parseInt(options.selectionStart)
-    const selectionEnd = options.selectionEnd
-      ? parseInt(options.selectionEnd)
-      : selectionStart
-    filter = pathsInRange(selectionStart, selectionEnd)
-  } else {
-    filter = (): boolean => true
-  }
+  const filter = getFilter(options)
 
-  const { makeStyles } = addImports(
-    root,
-    statement([
-      `import { makeStyles } from '${getStylesPackage(fileInfo.path)}';`,
-    ])
-  )
-  const Theme = importTheme({
-    root,
-    jscodeshift: j,
-    file: fileInfo.path,
-    themeImport: options.themeImport,
-  })
+  const { themeImport, makeStylesImport } = getImports(fileInfo, api, options)
+
+  const {
+    [makeStylesImport.specifiers[0].local?.name || 'makeStyles']: makeStyles,
+  } = addImports(root, makeStylesImport)
+  let Theme
+  if (isFlow || isTypeScript) {
+    ;({
+      [themeImport.specifiers[0].local?.name || 'Theme']: Theme,
+    } = addImports(root, themeImport))
+  }
 
   const arrowFunction = root
     .find(j.ArrowFunctionExpression)

src/util/filter.ts

@@ -0,0 +1,20 @@
+import { Options, ASTPath, Node } from 'jscodeshift'
+import pathsInRange from 'jscodeshift-paths-in-range'
+
+type Filter = (
+  path: ASTPath<Node>,
+  index: number,
+  paths: Array<ASTPath<Node>>
+) => boolean
+
+export function getFilter(options: Options): Filter {
+  if (options.selectionStart) {
+    const selectionStart = parseInt(options.selectionStart)
+    const selectionEnd = options.selectionEnd
+      ? parseInt(options.selectionEnd)
+      : selectionStart
+    return pathsInRange(selectionStart, selectionEnd)
+  } else {
+    return (): boolean => true
+  }
+}

src/util/getImports.ts

@@ -0,0 +1,56 @@
+import * as path from 'path'
+import { Options, ImportDeclaration, FileInfo, API } from 'jscodeshift'
+import getStylesPackage from './getStylesPackage'
+import pkgConf from 'pkg-conf'
+import defaults from 'lodash/defaults'
+import mapValues from 'lodash/fp/mapValues'
+import pick from 'lodash/fp/pick'
+import pickBy from 'lodash/fp/pickBy'
+import flow from 'lodash/fp/flow'
+
+type Imports = {
+  themeImport: ImportDeclaration
+  withStylesImport: ImportDeclaration
+  makeStylesImport: ImportDeclaration
+}
+
+export default function getImports(
+  { path: file }: FileInfo,
+  { j }: API,
+  options: Options
+): Imports {
+  const { statement } = j.template
+  const stylesPackage = getStylesPackage(file)
+  const packageConf = pkgConf.sync('material-ui-codemorphs', {
+    cwd: path.dirname(file),
+    skipOnFalse: true,
+  })
+  const filepath = pkgConf.filepath(packageConf)
+  const resolveImport = (cwd: string) => (imp: string): ImportDeclaration => {
+    const parsed = statement([imp])
+    if (parsed.source.value.startsWith('.') && file) {
+      parsed.source.value = path.relative(
+        path.dirname(file),
+        path.resolve(cwd, parsed.source.value)
+      )
+    }
+    return parsed
+  }
+  const resolveImports = (
+    cwd: string
+  ): ((raw: Record<string, unknown>) => Partial<Imports>) =>
+    flow([
+      pick(['themeImport', 'withStylesImport', 'makeStylesImport']),
+      pickBy(Boolean),
+      mapValues(resolveImport(cwd)),
+    ])
+  return defaults(
+    resolveImports(process.cwd())(options),
+    resolveImports(path.dirname(filepath || process.cwd()))(packageConf),
+    resolveImports(process.cwd())({
+      themeImport: `import { Theme } from '${stylesPackage}'`,
+      withStylesImport: `import { withStyles } from '${stylesPackage}'`,
+      makeStylesImport: `import { makeStyles } from '${stylesPackage}'`,
+    })
+  ) as Imports
+}