Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(gatsby): Add JSX Runtime options to gatsby-config.js #33050

Merged
merged 13 commits into from
Oct 29, 2021

Conversation

herecydev
Copy link
Contributor

@herecydev herecydev commented Sep 4, 2021

Description

Follow up to #32972.

Allow automatic react runtime to be enabled through config, the current workaround is to start manually setting babelPlugins and eslint config. There's going to be very few people doing this for something that is supposed to work out the box

Related Issues

Fixes #28657
Fixes #30373

@gatsbot gatsbot bot added the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label Sep 4, 2021

## jsxAutomaticRuntime

Allows using JSX without having to import React.
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Might need further elaboration?

Copy link
Contributor

@wardpeet wardpeet left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome! Thank you very much.

Could you also add:

  • "react/jsx-uses-react": "off" to eslint-config.ts

@@ -49,6 +49,7 @@ export const gatsbyConfigSchema: Joi.ObjectSchema<IGatsbyConfig> = Joi.object()
)
.single(),
developMiddleware: Joi.func(),
jsxAutomaticRuntime: Joi.boolean().default(false),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we move to these 2 options please.

Suggested change
jsxAutomaticRuntime: Joi.boolean().default(false),
jsxRuntime: Joi.string().default('classic'),
jsxImportSource: Joi.string()

@herecydev
Copy link
Contributor Author

* "react/jsx-uses-react": "off"

Added that, it looks like the eslint rule won't scan node_modules so plugins will be able to "mix and match" without throwing eslint errors. In addition enforced that the jsxRuntime == "automatic" | "classic"

@herecydev
Copy link
Contributor Author

Might have missed your last part of the comment

jsxImportSource: Joi.string()

What do you want this to do?

@wardpeet
Copy link
Contributor

wardpeet commented Sep 5, 2021

We should also set an option to change the importSource to for example to emotion. Ideally, we want to also add an action so plugins can set it themselves

importSource is similar to @jsx pragma

@LekoArts LekoArts added topic: core Relates to Gatsby's core (e.g. page loading, reporter, state machine) topic: DX Developer Experience (e.g. Fast Refresh, i18n, SSR, page creation, starters) and removed status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer labels Sep 6, 2021
@LekoArts LekoArts changed the title Automatic JSX Runtime via config feat(gatsby): Add JSX Runtime options to gatsby-config.js Sep 6, 2021
@herecydev
Copy link
Contributor Author

@wardpeet I think this is good to go now, jsxRuntime works as expected, jsxImportSource is present but nothing listens to it at the moment (I think another PR could take care of that, preferably someone with emotion pragma experience).

There's a failing test but I'm convinced that's unrelated.

@herecydev
Copy link
Contributor Author

@wardpeet I'm struggling with these tests, is it usual to have this level of flake (each run through spits out some new error). I also have no means to rerun this stuff and try and get it through!

@wardpeet wardpeet added this to To cherry-pick in V3 Release Hotfixes via automation Oct 29, 2021
@wardpeet wardpeet added the bot: merge on green Gatsbot will merge these PRs automatically when all tests passes label Oct 29, 2021
@wardpeet wardpeet merged commit c2e181d into gatsbyjs:master Oct 29, 2021
@herecydev herecydev deleted the topic/automaticJSX branch October 30, 2021 12:50
@vladar
Copy link
Contributor

vladar commented Nov 2, 2021

@wardpeet This is a new feature, not a hotfix - do we actually want to backport it to v3? If so, this likely needs a minor release, not a patch.

axe312ger pushed a commit that referenced this pull request Nov 9, 2021
Co-authored-by: Ward Peeters <ward@coding-tech.com>
@vladar vladar removed this from To cherry-pick in V3 Release Hotfixes Nov 18, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bot: merge on green Gatsbot will merge these PRs automatically when all tests passes topic: core Relates to Gatsby's core (e.g. page loading, reporter, state machine) topic: DX Developer Experience (e.g. Fast Refresh, i18n, SSR, page creation, starters)
Projects
None yet
4 participants