codemod(v6): Convert all process.env usage to dot notation (#8611)

packages/codemods/src/codemods/v6.x.x/processEnvDotNotation/README.md

@@ -0,0 +1,10 @@
+# Process Env Dot Notation
+
+Finds all cases where `process.env` is accessed via array notation (specifically string literals), and converts it to dot notation.
+
+```diff
+- process.env['BAZINGA']
++ process.env.BAZINGA
+```
+
+**NOTE** - this does not deal with dynamic access case. This is something users will need to do themselves

packages/codemods/src/codemods/v6.x.x/processEnvDotNotation/__testfixtures__/default.input.js

@@ -0,0 +1,10 @@
+process.env['NODE_ENV']
+process.env['ACCESS_TWO']
+process.env.ACCESS_THREE
+
+if (process.env['NODE_ENV'] === 'production') {
+  console.log('Im in production')
+}
+
+
+process.env['KITTENS'].replaceAll('claws', 'cuddles')

packages/codemods/src/codemods/v6.x.x/processEnvDotNotation/__testfixtures__/default.output.js

@@ -0,0 +1,9 @@
+process.env.NODE_ENV
+process.env.ACCESS_TWO
+process.env.ACCESS_THREE
+
+if (process.env.NODE_ENV === 'production') {
+  console.log('Im in production')
+}
+
+process.env.KITTENS.replaceAll('claws', 'cuddles')

packages/codemods/src/codemods/v6.x.x/processEnvDotNotation/__tests__/processEnvDotNotation.test.ts

@@ -0,0 +1,5 @@
+describe('processEnvDotNotation', () => {
+  it('Replaces array access syntax with dot notation', async () => {
+    await matchTransformSnapshot('processEnvDotNotation', 'default')
+  })
+})

packages/codemods/src/codemods/v6.x.x/processEnvDotNotation/processEnvDotNotation.ts

@@ -0,0 +1,30 @@
+import { FileInfo, API } from 'jscodeshift'
+
+export default function transform(file: FileInfo, api: API) {
+  const j = api.jscodeshift
+  const root = j(file.source)
+
+  root
+    .find(j.MemberExpression, {
+      object: {
+        type: 'MemberExpression',
+        object: { name: 'process' },
+        property: { name: 'env' },
+      },
+    })
+    .forEach((path) => {
+      const envVarName = path.value.property
+
+      // Only apply the codemod if process.env['bbb']
+      // where bbb is the string literal. Otherwise it catches process.env.bbb too
+      if (j.StringLiteral.check(envVarName)) {
+        const dotNotation = j.memberExpression(
+          j.memberExpression(j.identifier('process'), j.identifier('env')),
+          j.identifier(envVarName.value)
+        )
+        j(path).replaceWith(dotNotation)
+      }
+    })
+
+  return root.toSource()
+}

packages/codemods/src/codemods/v6.x.x/processEnvDotNotation/processEnvDotNotation.yargs.ts

@@ -0,0 +1,25 @@
+import path from 'path'
+
+import fg from 'fast-glob'
+import task, { TaskInnerAPI } from 'tasuku'
+
+import { getPaths } from '@redwoodjs/project-config'
+
+import runTransform from '../../../lib/runTransform'
+
+export const command = 'process-env-dot-notation'
+export const description = '(v6.x.x->v6.x.x) Converts world to bazinga'
+
+export const handler = () => {
+  task('Process Env Dot Notation', async ({ setOutput }: TaskInnerAPI) => {
+    await runTransform({
+      transformPath: path.join(__dirname, 'processEnvDotNotation.js'),
+      targetPaths: fg.sync('**/*.{js,jsx,tsx}', {
+        cwd: getPaths().web.src,
+        absolute: true,
+      }),
+    })
+
+    setOutput('All done! Run `yarn rw lint --fix` to prettify your code')
+  })
+}

packages/codemods/src/testUtils/matchInlineTransformSnapshot.ts

@@ -33,6 +33,9 @@ export const matchInlineTransformSnapshot = async (
   await runTransform({
     transformPath,
     targetPaths: [tempFilePath],
+    options: {
+      verbose: 1,
+    },
     parser,
   })
 

packages/codemods/src/testUtils/matchTransformSnapshot.ts

@@ -43,7 +43,8 @@ export const matchTransformSnapshot: MatchTransformSnapshotFunction = async (
     targetPaths: [tempFilePath],
     parser,
     options: {
-      verbose: true,
+      verbose: 1,
+      print: true,
     },
   })
 

packages/codemods/tasks/generateCodemod/generateCodemod.mjs

@@ -4,7 +4,8 @@ import url from 'node:url'
 
 import c from 'ansi-colors'
 import fse from 'fs-extra'
-import { template } from 'lodash'
+// lodash is commonjs
+import template from 'lodash/template.js'
 import prompts from 'prompts'
 
 const questions = [

packages/codemods/tasks/generateCodemod/templates/code/codemod.yargs.ts.template

@@ -1,5 +1,6 @@
 import path from 'path'
 
+import fg from 'fast-glob'
 import task, { TaskInnerAPI } from 'tasuku'
 
 import { getPaths } from '@redwoodjs/project-config'
@@ -11,13 +12,16 @@ export const description = '(${version}->${version}) Converts world to bazinga'
 export const handler = () => {
   task(
     '${titleName}',
-    async ({ setOutput }: TaskInnerApi) => {
+    async ({ setOutput }: TaskInnerAPI) => {
       await runTransform({
         transformPath: path.join(__dirname, '${name}.js'),
         // Here we know exactly which file we need to transform, but often times you won't.
         // If you need to transform files based on their name, location, etc, use `fast-glob`.
         // If you need to transform files based on their contents, use `getFilesWithPattern`.
-        targetPaths: [path.join(getPaths().base, 'redwood.toml')],
+        targetPaths: fg.sync('**/*.{js,jsx,tsx}', {
+          cwd: getPaths().web.src,
+          absolute: true,
+        }),
       })
 
       setOutput('All done! Run `yarn rw lint --fix` to prettify your code')