feat(remix-dev): add jsxImportSource config option

[jolle]

Libraries such as emotion (via @emotion/react) are commonly used with the tsconfig option jsxImportSource, which changes the default React.createElement calls to the specified source automatically. Because esbuild does not support this out-of-the-box (see evanw/esbuild#718), by using a dynamically created shim file it is possible to emulate this behavior. Although an inline pragma works, it is required to add this to every file instead of being automatically detected.

As esbuild does not support inline code injection (see evanw/esbuild#1169), this PR creates a temporary directory with a temporary file for the custom shim. While this is not very optimal, it is the best option I've found (didn't seem like esbuild plugins could do this?). In this PR, the tsconfig.json file is read (if one exists), and a shim is created based on jsxImportSource, if one is specified. A new config option, customJSXShimPath, is exposed as well if a custom path to the JSX factory is required for the shim.

This pull request also adds tests for this new behavior, and refactors the tests of build-test.ts that were being skipped (because they didn't work). Due to ESM-related issues and conflicts with the Jest environment, a new, simpler app needed to be created without any ESM-only modules, and some modules needed to be mocked during build-time. The JSX factory tests run the built output within the test in a "sandbox" where the calls to the JSX factory can be monitored.

This is a quite big new feature – apologies for not creating a discussion first!

Closes: #1633. Related to: #2209.

[remix-cla-bot]

Hi @jolle,

Welcome, and thank you for contributing to Remix!

Before we consider your pull request, we ask that you sign our Contributor License Agreement (CLA). We require this only once.

You may review the CLA and sign it by adding your name to contributors.yml.

Once the CLA is signed, the CLA Signed label will be added to the pull request.

If you have already signed the CLA and received this response in error, or if you have any questions, please contact us at [email protected].

Thanks!

- The Remix team

[remix-cla-bot]

Thank you for signing the Contributor License Agreement. Let's get this merged! 🥳

[machour]

@jolle Can you please update this PR to fix conflicts? 🙏🏼

[jolle]

Merge conflicts have been fixed. I noticed there has been changes to the testing env that causes the new tests to fail (related to fixtures trying to import the remix package). I'll try to fix the tests soon, though the solution isn't immediately obvious to me – I'll have to go through the changes and find what has broken the fixtures!

[MichaelDeBoey]

@jolle Please rebase your branch onto latest dev & fix conflicts + tests.
That way the team has a clean plate to start reviewing if they want to have this merged into the library or not, thanks! 🙏

[jolle]

This is not optimal but regardless of what I did to Babel or Jest these modules seemed to break Jest one way or another.

[jolle]

I've resolved the merge conflicts and fixed the tests. In addition to the caveat above, I downgraded strip-json-comments as v4 was released only to make it an ESM (which is breaking the Jest env; v3 does not have this issue).

[jolle]

I have removed the temporary file system injection for adding the custom JSX factory; instead, the import source is loaded by adding a @jsx pragma header to every file (which is supported by esbuild) using a plugin.

[luishdz1010]

This now works natively on esbuild, adding:

"overrides": {
    "@remix-run/dev": {
      "esbuild": "0.15.2"
    }
  }

To package.json (and using npm) works without any configs.

[jolle]

Support for automatic jsxImportSource detection in esbuild was added in v0.14.51 (evanw/esbuild#2349), so this is no longer necessary.