-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added new JSX entry points for the automatic runtime (#1970)
* re-export react jsx-runtime to test project config * minimal react playground app * demonstrate w/o import * ignore react in scope rule * custom pragma end to end w/ react/jsx-runtime pass thru * dupe jsx for future rewriting, at least get React's jsx fallback when no css * copy the CRA code over * Remove the minimal-react playground * Remove console.log * Rename jsx-runtime entrypoint to jsx-runtime.js * Add jsx-runtime.js to the publishable files * Move createElement export to the root entry of @emotion/core * Move configuration of the umdName to the @emotion/core package.json * Minor refactor in babel-preset-css-prop * Align the import source value to use the convention used in the output code * Try to bump node version on CircleCI * Refactor jsx runtimes so they share the css prop-related implementation and introduce the dev runtime * Fixed an issue with label extraction from the stack of the bundles files * "fix" flow errors * Add snapshot tests for the runtime option * Disable react/react-in-jsx-scope rule * Add basic runtime tests for new JSX runtimes * Add UMD builds back to @emotion/core * Remove .js suffix from our runtimes as per latest Babel revert * Add changesets * Update .changeset/nine-waves-play.md Co-authored-by: Ryan Stelly <[email protected]> Co-authored-by: Mateusz Burzyński <[email protected]> Co-authored-by: mitchellhamilton <[email protected]>
- Loading branch information
4 people
authored
Oct 31, 2020
1 parent
37e9320
commit 71514b0
Showing
46 changed files
with
2,114 additions
and
421 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| --- | ||
| '@emotion/core': minor | ||
| --- | ||
|
|
||
| Support for [the new JSX runtimes](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) has been added. They require compatible React versions and shouldn't be manually used. | ||
|
|
||
| To use them you can use the new `@jsxImportSource @emotion/core` pragma instead of the old `@jsx jsx` or you can use `@emotion/babel-preset-css-prop` with `{ runtime: 'automatic' }` option to have it handled automatically for you for the whole project. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| '@emotion/babel-preset-css-prop': minor | ||
| --- | ||
|
|
||
| A new `runtime` option has been added that can be configured to `'automatic'` to opt into [the new JSX runtimes](<(https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html)>). To use this a compatible React version has to be used. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
8 changes: 8 additions & 0 deletions
8
packages/babel-preset-css-prop/__tests__/__fixtures__/fragment.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| export let Button = ({ loading, ...props }) => { | ||
| return ( | ||
| <> | ||
| <button css={{ color: 'hotpink' }} {...props} /> | ||
| {loading && <span>{'Loading...'}</span>} | ||
| </> | ||
| ) | ||
| } |
17 changes: 17 additions & 0 deletions
17
packages/babel-preset-css-prop/__tests__/__fixtures__/key-after-spread.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| export let Buttons = ({ buttons }) => { | ||
| return ( | ||
| <div> | ||
| {buttons.map(({ id, label, ...rest }) => ( | ||
| <button | ||
| {...rest} | ||
| key={id} | ||
| css={{ | ||
| color: 'hotpink' | ||
| }} | ||
| > | ||
| {label} | ||
| </button> | ||
| ))} | ||
| </div> | ||
| ) | ||
| } |
10 changes: 10 additions & 0 deletions
10
packages/babel-preset-css-prop/__tests__/__fixtures__/no-static-children.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| export let Button = props => { | ||
| return ( | ||
| <button | ||
| css={{ | ||
| color: 'hotpink' | ||
| }} | ||
| {...props} | ||
| /> | ||
| ) | ||
| } |
11 changes: 11 additions & 0 deletions
11
packages/babel-preset-css-prop/__tests__/__fixtures__/static-children.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| export let Button = () => { | ||
| return ( | ||
| <button | ||
| css={{ | ||
| color: 'hotpink' | ||
| }} | ||
| > | ||
| {'Test'} | ||
| </button> | ||
| ) | ||
| } |
Oops, something went wrong.