feat: add "/http" and "/graphql" export paths

[thepassle]

… file

• Discussed in Avoid barrel file exports #2037 (Avoid barrel file exports #1984)
• Fixes Add "http" and "graphql" exports #2038

[kettanaito]

This looks great! Let's have this released in the next minor version. Just don't merge this yet, I'd like to release a few bug fixes before the next version bump. Thanks.

@thepassle, how do you recommend us mention these exports in the docs? I still think that importing from the root should be the default. I wonder where these export paths would be proper to mention.

[pleunv]

The annoying thing is that autocompletion will most likely favor the shortest path, and I don't think there's a way to tell it otherwise. What I generally end up doing is set up eslint's no-restricted-imports rule with a custom message to reroute users to the right import. Not the most user-friendly approach, though.

Something along the lines of:

"rules": {
  "no-restricted-imports": [
    "error",
    {
      "paths": [
        {
          "name": "msw",
          "importNames": ["graphql"],
          "message": "Please import 'graphql' from 'msw/graphql' instead."
        },
      ]
    }
  ]
}

[kettanaito]

@pleunv, autocomplete right now is pretty broken for me anyways. VS Code always tries to import things where their type definitions are, not what the export says in package.json. For example, when I autoimport http I get this:

import { http } from 'msw/lib/http'

Which is incorrect; you shouldn't be importing things from /lib/. This looks like a problem the end developer has to configure themselves.

[pleunv]

Of all the TypeScript issues I've ever run into, fortunately that's not one of them 😄. That would honestly drive me mad. Did you override any of the "Import Module" settings?

[kettanaito]

@pleunv, no, that's the default behavior.

[thepassle]

This looks great! Let's have this released in the next minor version. Just don't merge this yet, I'd like to release a few bug fixes before the next version bump. Thanks.

Okidoki, any idea on when the next minor will be released?

I still think that importing from the root should be the default. I wonder where these export paths would be proper to mention.

Not really sure why you wouldnt change this:

to:

I hardly think this impacts DX for the largest usecase, even if you use both graphql and http, but I'm also not really interested in discussing that any longer; I think the perf difference outweighs DX, but it seems I haven't been able to convince you of that, so with peace and love, I won't go into that any further and leave it at this :)

@thepassle, how do you recommend us mention these exports in the docs?

Ill leave that up to your discretion

[kettanaito]

Okidoki, any idea on when the next minor will be released?

I'm releasing next 2 bug fixes related to React Native, and then it's the minor release time!

Not really sure why you wouldnt change this: ... to:

You are omitting the experience implications here. All the tutorials, videos, and articles feature from 'msw'. If the person goes to the docs and, suddenly, it's from 'msw/http', a red flag goes in their head that someone is wrong. Either the materials they read are wrong or the docs.

That's why performance improvements like these deserve a separate page, I think. Before (and if) we drop the root-level export altogether, I won't recommend this by default for one simple reason: nobody has reported performance issues due to barrel imports in the past, so nobody had performance issues due to barrel imports, it's as simple as that.

Those who need this fix should be able to find it.

but it seems I haven't been able to convince you of that

You've convinced me. From my side, I'm trying to show you the area of effect this change has on the end developer. I will not discard educational experience and simplicity of use. The msw/http and msw/graphql imports will be opt-in for those who experience issues. Those who don't can keep using msw root-level export as they did in the past.

[kettanaito]

I have one piece of feedback. The format we have now is msw/<environment>: msw/node, msw/browser, msw/native. I feel that msw/http breaks this rule.

What do you think about msw/core/http/msw/core/graphql?

[kettanaito]

Released: v2.2.0 🎉

This has been released in v2.2.0!

• 📄 Release notes
• 📦 npm package

Make sure to always update to the latest version (npm i msw@latest) to get the newest features and bug fixes.

---

Predictable release automation by @ossjs/release.