[codemod][FN] msw/2/upgrade-recipe

[jiri-prokop-pb]

Faulty codemod

msw/2/upgrade-recipe source

Sample code

https://github.com/jiri-prokop-pb/codemod-msw2-repro

There is test.spec.ts that use msw.

You can also find upgrade-msw-v2.sh script there that runs the codemod and shows the problems mentioned below.

Original

import { rest } from 'msw';

rest.get('/api', (req, res, ctx) => {
  params = req.url.searchParams;

  return res(
    ctx.json({
      data: [],
    }),
  );
});

Expected

import { http, HttpResponse } from 'msw';

http.get('/api', ({ request }) => {
  const url = new URL(request.url);

  params = url.searchParams;

  return HttpResponse.json({
    data: [],
  });
});

Actual

import { http } from 'msw';

http.get('/api', (req, res, ctx) => {
  params = req.url.searchParams;

  return res(
    ctx.json({
      data: [],
    }),
  );
});

Estimated impact

Numbers about your specific codemod run:

• Total number of files/instances transformed: 106

• Number of files/instances missed by the codemod (FN): 106

• Number of files/instances mistakenly transformed (FP): 0

• I fixed my issue with a workaround, but I'm reporting this for other community members.

Note: the workaround involved copying the codemod files directly to my project and not using codemod package at all. Instead I created a small wrapper that runs the codemod with ts-morph and globby directly:

wrapper script

import { globbyStream } from 'globby';
import { Project } from 'ts-morph';

import { readFile } from 'fs/promises';

import { handleSourceFile as handleSourceFile_07_callbackSignature } from './codemods/msw2/callback-signature.ts';
import { handleSourceFile as handleSourceFile_04_ctxFetch } from './codemods/msw2/ctx-fetch.ts';
import { handleSourceFile as handleSourceFile_01_imports } from './codemods/msw2/imports.ts';
import { handleSourceFile as handleSourceFile_08_lifecycleEventsSignature } from './codemods/msw2/lifecycle-events-signature.ts';
import { handleSourceFile as handleSourceFile_09_printHandler } from './codemods/msw2/print-handler.ts';
import { handleSourceFile as handleSourceFile_05_reqPassthrough } from './codemods/msw2/req-passthrough.ts';
import { handleSourceFile as handleSourceFile_03_requestChanges } from './codemods/msw2/request-changes.ts';
import { handleSourceFile as handleSourceFile_06_responseUsages } from './codemods/msw2/response-usages.ts';
import { handleSourceFile as handleSourceFile_02_typeArgs } from './codemods/msw2/type-args.ts';

const handleSourceFileFns = [
  handleSourceFile_01_imports,
  handleSourceFile_02_typeArgs,
  handleSourceFile_03_requestChanges,
  handleSourceFile_04_ctxFetch,
  handleSourceFile_05_reqPassthrough,
  handleSourceFile_06_responseUsages,
  handleSourceFile_07_callbackSignature,
  handleSourceFile_08_lifecycleEventsSignature,
  handleSourceFile_09_printHandler,
];

function transform(oldPath: string, oldData: string) {
  const project = new Project({
    skipFileDependencyResolution: true,
    compilerOptions: {
      allowJs: true,
    },
  });
  let beforeData = oldData;
  let afterData = oldData;

  for (const handleSourceFile of handleSourceFileFns) {
    try {
      const sourceFile = project.createSourceFile(oldPath, beforeData, {
        overwrite: true,
      });

      afterData = handleSourceFile(sourceFile);

      if (typeof afterData === 'string') {
        beforeData = afterData;
        sourceFile.saveSync();
      }
    } catch (err) {
      console.error(`Error transforming ${oldPath}: ${err.message}`);
    }
  }

  return afterData;
}

async function transformFiles() {
  for await (const path of globbyStream('{src,libs,apps}/**/*.{ts,tsx}', {
    gitignore: true,
  })) {
    console.log(`Transforming ${path.toString()}...`);
    const data = await readFile(path, 'utf-8');

    transform(path, data);
  }
}

void transformFiles();

Logs:

❯ cat .codemod/logs/2024-10-08T09:51:25.898Z-error.log
- CLI version: 0.14.1
- Node version: 20.16.0
- OS: Darwin 24.0.0 arm64

Error at codemod-msw2-repro/test.spec.ts:
Invalid transformer

(last two lines are repeated multiple times; probably once per sub-codemod)

Additional context

I'd like to report two problems actually:

1. the codemods not working (but only in context of codemod repository)
2. silent failures when --logs is not used; as you can see in the output of the provided script, if you don't use --logs you won't know that codemods didn't work, the process will have exit code 0 and there is no indication that something went wrong; when --logs is used then the process will fail and you can see the logs but they are still not very helpful

I wasn't able to figure out why point 1 is happening, it's very strange issue. What's making it even worse is that one of the codemods worked and changed the import so you can see it partially working but you have no idea why other changes weren't applied.

Regarding point 2, I believe better logging would be useful for cases like this. Most likely issues like this one won't be reported because people may not realized codemods are failing (and they only may have assumption that their code is too complicated to be handled by codemod or similar).

[alexbit-codemod]

Thanks so much for the detailed report. Will ask the team to lookin into this.

[goesbysteve]

Has there been any further progress? I'm having the same issue. Looks like msw/2/response-usage is the one that isn't working as advertised.

[alexbit-codemod]

Thanks for bumping this up, @goesbysteve.

This hasn't been picked up yet due to other priorities.
I'll reshare it with the community to see if someone can take a look.

(in the meantime, adding details on the potential value, like the number of files impacted, time savings, whether you’d wait for migration, or your project timeline, could help generate interest and prioritize it.)

[jiri-prokop-pb]

@goesbysteve if you want, there is a "wrapper script" in my original message that you can use to run the codemods by copying them to your project... not ideal but that was what unblocked us

[goesbysteve]

@goesbysteve if you want, there is a "wrapper script" in my original message that you can use to run the codemods by copying them to your project... not ideal but that was what unblocked us

Thank you, I ended up doing the 500 changes manually

[alexbit-codemod]

Sorry to hear that we couldn't get this issue resolved soon enough for your use case. cc @amirabbas-gh

[goesbysteve]

Sorry to hear that we couldn't get this issue resolved soon enough for your use case. cc @amirabbas-gh

Don't worry, it's no problem.

[mohab-sameh]

Resolved in #2

[khadorkin]

@alexbit-codemod , @mohab-sameh I got the same error from statsig/replace-gate.
I used a test fixture from the repo, but it failed.
Logs:

- CLI version: 0.18.3
- Node version: 22.14.0
- OS: Darwin 24.3.0 arm64

Error at .../statsig.input.js:
Invalid transformer

[mohab-sameh]

@khadorkin Could you link a sample reproduction repo? FYI, we moved this codemod to codemod-com/commons. You can find the link to the updated source on the codemod's page on Codemod Registry you linked.

@amirabbas-gh Are you able to reproduce this on statsig/replace-gate? If so, we can apply the same fix.

[khadorkin]

@mohab-sameh I just downloaded this fixture to local machine & called

npx codemod statsig/replace-gate --key=the-gate --value=true --type=boolean --logs

[mohab-sameh]

@khadorkin ah, so it even fails with the given test fixture! Sorry, I misunderstood your issue earlier. I can reproduce this too. @amirabbas-gh Can you push a fix?