[RFC] Import fallbacks for easier module mocking

[shilman]

Summary

A more convenient way to do module mocking that does not require editing package.json every time you want to mock.

Problem Statement

Storybook recently introduced type-save module mocking using a Node standard called package.json import subpaths.

The feature is great because it allows you to mock out any module in your Storybook, and this will work in Node, the browser, portable stories in other tools, and so on.

In its current form, this approach requires adding a new entry to your package.json for every file you want to mock. For example, to mock the module at ./lib/settings.ts you would add:

{
  "imports": {
    "#lib/settings": {
      "storybook": "./lib/settings.mock.ts",
      "default": "./lib/settings.ts"
    },
    // etc.
  }
}

This works fine, but it's extra work to have to add/remove settings from package.json every time you change what you're mocking. It also clutters the package.json making it harder for people to read.

Non-goals

No response

Implementation

Webpack and Typescript support a fallback mechanism that makes this much easier.

{
  "imports": {
    "#*": {
      "storybook": ["./*.mock", "./*"],
      "default": "./*"
    }
  }
}

Using this construct, users could just add this single entry to their package.json and then use as many .mock files as they need around their projects.

Node doesn't allow fallbacks for imports for perf reasons. And Vite doesn't allow it to follow the Node implementation. However, we believe that for non-production use cases, the performance argument does not apply, and that both Node and Vite should support this fallback syntax, possibly enabled by a configuration flag. We should lobby both tools to extend the standard.

Prior Art

No response

Deliverables

N/A

Risks

No response

Unresolved Questions

No response

Alternatives considered / Abandoned Ideas

No response