MSW: export controllers to a separate index file.

[stijnvanhulle]

Hi, At this moment we are using Orval 🍻 to generate our own API client which is already working really great. We can import our Axios controllers and React-query controllers from the index.ts(api-client/lib/gen/clients/axios/index.ts) file. But we also need the MSW controllers to mock our API calls.

At this moment we have a couple of them but those can become really fast 100 imports that we need to specify with the correct path.

import { petControllerMSW } from 'api-client/lib/gen/clients/axios/pet-controller/pet-controller.msw'
import { jupilerControllerMSW } from 'api-client/lib/gen/clients/axios/jupiler-controller/jupiler-controller.msw'

It would be nice to have something like this: just one import that contains all the different MSW controllers.

import { petControllerMSW, jupilerControllerMSW } from 'api-client/lib/gen/clients/msw'

I have tried playing around with workspace and the different modes but all modes have the same thing: MSW is excluded in the exports.

Idea

src/core/writers/specs.ts
I tried something out by adding a new file msw.ts that contains all the controllers but not sure if this would be the best way to solve this issue, any clues on what can be possible here? Maybe a new client just for the MSW?

  if (output.workspace) {
    const workspacePath = output.workspace;
    let imports = implementationPaths
      .filter((path) => !path.endsWith('.msw.ts'))
      .map((path) =>
        relativeSafe(workspacePath, getFileInfo(path).pathWithoutExtension),
      );

    if (output.schemas) {
      imports.push(
        relativeSafe(workspacePath, getFileInfo(output.schemas).dirname),
      );
    }

    const indexFile = join(workspacePath, '/index.ts');

    if (await pathExists(indexFile)) {
      const data = await readFile(indexFile, 'utf8');
      const importsNotDeclared = imports.filter((imp) => !data.includes(imp));
      await appendFile(
        indexFile,
        uniq(importsNotDeclared)
          .map((imp) => `export * from '${imp}';`)
          .join('\n') + '\n',
      );
    } else {
      await outputFile(
        indexFile,
        uniq(imports)
          .map((imp) => `export * from '${imp}';`)
          .join('\n') + '\n',
      );
    }

    // indexFile for MSW => this creates a msw file with all exports for the MSW controllers
    const indexMSWFile = join(workspacePath, '/msw.ts');

    let importsMSW = implementationPaths
      .filter((path) => !!path.endsWith('.msw.ts'))
      .map((path) =>
        relativeSafe(workspacePath, getFileInfo(path).pathWithoutExtension),
      );

    if (await pathExists(indexMSWFile)) {
      const data = await readFile(indexMSWFile, 'utf8');
      const importsNotDeclared = importsMSW.filter(
        (imp) => !data.includes(imp),
      );
      await appendFile(
        indexMSWFile,
        uniq(importsNotDeclared)
          .map((imp) => `export * from '${imp}';`)
          .join('\n') + '\n',
      );
    } else {
      await outputFile(
        indexMSWFile,
        uniq(importsMSW)
          .map((imp) => `export * from '${imp}';`)
          .join('\n') + '\n',
      );
    }

    implementationPaths = [indexFile, ...implementationPaths];
  }

Thanks 🙂

[yekver]

I've thought about almost the same. Current approach is good but do not fit well in some obvious situations like for example: I need to have all my MSW generators exported as array.

Right now I have to manually do this like:

import { getSomeSchema1MSW } from 'Src/generated/schema1.msw'
import { getSomeSchema2MSW } from 'Src/generated/schema2.msw'
import { getSomeSchema3MSW } from 'Src/generated/schema3.msw'

export default [
  ...getSomeSchema1MSW(),
  ...getSomeSchema2MSW(),
  ...getSomeSchema3MSW()
]

[Kangarused]

+1 - This would be an absolute life saver for large projects

[HecFlo]

+1