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

Added new JSX entry points for the automatic runtime #1970

Merged
merged 28 commits into from
Oct 31, 2020
Merged
Show file tree
Hide file tree
Changes from 27 commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
d1c9bc6
re-export react jsx-runtime to test project config
Aug 11, 2020
4967f9c
minimal react playground app
Aug 12, 2020
6eeb60a
demonstrate w/o import
Aug 12, 2020
8d3d88e
ignore react in scope rule
Aug 12, 2020
23c7074
custom pragma end to end w/ react/jsx-runtime pass thru
Aug 12, 2020
0750e8f
dupe jsx for future rewriting, at least get React's jsx fallback when…
Aug 12, 2020
bcd6918
copy the CRA code over
Aug 12, 2020
338a0e8
Remove the minimal-react playground
Andarist Oct 18, 2020
5dec9f1
Remove console.log
Andarist Oct 18, 2020
09b5a55
Rename jsx-runtime entrypoint to jsx-runtime.js
Andarist Oct 18, 2020
5b3250f
Add jsx-runtime.js to the publishable files
Andarist Oct 18, 2020
82b44ba
Move createElement export to the root entry of @emotion/core
Andarist Oct 18, 2020
c471b94
Move configuration of the umdName to the @emotion/core package.json
Andarist Oct 18, 2020
17680e7
Minor refactor in babel-preset-css-prop
Andarist Oct 18, 2020
70f0969
Align the import source value to use the convention used in the outpu…
Andarist Oct 18, 2020
6181943
Try to bump node version on CircleCI
Andarist Oct 18, 2020
45b28c3
Refactor jsx runtimes so they share the css prop-related implementati…
Andarist Oct 18, 2020
faac259
Fixed an issue with label extraction from the stack of the bundles files
Andarist Oct 18, 2020
5159b99
Merge branch 'master' into jsx-runtime
Andarist Oct 18, 2020
ed682ee
"fix" flow errors
emmatown Oct 18, 2020
a1cc40b
Add snapshot tests for the runtime option
Andarist Oct 19, 2020
341b5a6
Disable react/react-in-jsx-scope rule
Andarist Oct 19, 2020
733b6f7
Add basic runtime tests for new JSX runtimes
Andarist Oct 19, 2020
23e68d3
Add UMD builds back to @emotion/core
emmatown Oct 19, 2020
386b855
Remove .js suffix from our runtimes as per latest Babel revert
Andarist Oct 20, 2020
2798e54
Add changesets
Andarist Oct 30, 2020
ad892cb
Update .changeset/nine-waves-play.md
emmatown Oct 31, 2020
8f6271e
Merge branch 'master' into jsx-runtime
emmatown Oct 31, 2020
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .changeset/nine-waves-play.md
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.
5 changes: 5 additions & 0 deletions .changeset/soft-icons-drum.md
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.
8 changes: 4 additions & 4 deletions .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ version: 2
jobs:
flow:
docker:
- image: circleci/node:10.6.0-browsers
- image: circleci/node:10.13.0-browsers
working_directory: ~/repo
steps:
- checkout
Expand All @@ -25,7 +25,7 @@ jobs:

test:
docker:
- image: circleci/node:10.6.0
- image: circleci/node:10.13.0
working_directory: ~/repo
steps:
- checkout
Expand All @@ -48,7 +48,7 @@ jobs:

test_dist:
docker:
- image: circleci/node:10.6.0
- image: circleci/node:10.13.0
working_directory: ~/repo
steps:
- checkout
Expand All @@ -66,7 +66,7 @@ jobs:

lint_and_typescript:
docker:
- image: circleci/node:10.6.0
- image: circleci/node:10.13.0
working_directory: ~/repo
steps:
- checkout
Expand Down
30 changes: 26 additions & 4 deletions babel.config.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
const path = require('path')
const emotionDevPreset = require('babel-preset-emotion-dev')

let needsBabelPluginEmotion = filename =>
filename.includes(path.join('.test.js'))
let needsBabelPluginEmotion = filename => /\.test\.js$/.test(filename)

let isTestFile = filename =>
/\.test\.js$/.test(filename) ||
filename.includes(`${path.sep}__tests__${path.sep}`)

module.exports = api => {
api.cache(true)
Expand All @@ -14,14 +18,32 @@ module.exports = api => {
((!filename.includes('no-babel') &&
needsBabelPluginEmotion(filename)) ||
filename.includes(path.join('__tests__', 'babel'))),
plugins: ['babel-plugin-emotion']
presets: [[emotionDevPreset, { useEmotionPlugin: true }]]
},
{
test: filename =>
filename &&
filename.includes('source-map') &&
needsBabelPluginEmotion(filename),
plugins: [['babel-plugin-emotion', { sourceMap: true }]]
presets: [
[emotionDevPreset, { useEmotionPlugin: true, sourceMap: true }]
]
},
{
test: filename =>
filename &&
isTestFile(filename) &&
filename.includes('automatic-runtime'),
presets: [[emotionDevPreset, { runtime: 'automatic' }]]
},
{
test: filename =>
filename &&
isTestFile(filename) &&
filename.includes('automatic-dev-runtime'),
presets: [
[emotionDevPreset, { runtime: 'automatic', development: true }]
]
}
]
}
Expand Down
21 changes: 12 additions & 9 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@
"release": "yarn build && changeset publish"
},
"resolutions": {
"**/react": "16.8.1",
"**/react-dom": "16.8.1",
"**/react": "16.14.0",
"**/react-dom": "16.14.0",
"**/browserslist": "^3.2.8",
"**/graphql-type-json": "0.2.4"
},
Expand Down Expand Up @@ -64,6 +64,7 @@
"prettier/prettier": "error",
"react/prop-types": 0,
"react/no-unused-prop-types": 0,
"react/react-in-jsx-scope": 0,
"standard/computed-property-even-spacing": 0,
"no-template-curly-in-string": 0,
"camelcase": 0,
Expand Down Expand Up @@ -121,7 +122,9 @@
"packages/*"
],
"globals": {
"react": "React"
"react": "React",
"react/jsx-runtime": "ReactJSX",
"react/jsx-dev-runtime": "ReactJSXDev"
Comment on lines +126 to +127
Copy link
Member

Choose a reason for hiding this comment

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

These don't actually exist but we still want UMD builds for Emotion so these are just to make it so Preconstruct can make a build

}
},
"bugs": {
Expand Down Expand Up @@ -161,19 +164,20 @@
"@babel/core": "^7.5.5",
"@babel/helper-module-imports": "^7.0.0",
"@babel/plugin-proposal-class-properties": "^7.5.5",
"@babel/plugin-syntax-jsx": "^7.2.0",
"@babel/plugin-syntax-jsx": "^7.12.1",
"@babel/plugin-transform-flow-strip-types": "^7.4.4",
"@babel/plugin-transform-react-jsx": "^7.3.0",
"@babel/plugin-transform-react-jsx": "^7.12.1",
"@babel/preset-env": "^7.5.5",
"@babel/preset-flow": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@babel/preset-react": "^7.12.1",
"@babel/register": "^7.5.5",
"@babel/runtime": "^7.5.5",
"@changesets/changelog-github": "^0.1.0",
"@changesets/cli": "^2.3.0",
"@manypkg/cli": "^0.5.2",
"@mdx-js/mdx": "^1.1.0",
"@mdx-js/react": "^1.0.27",
"@preconstruct/cli": "1.1.29",
"@testing-library/react": "^8.0.2",
"@types/jest": "^23.0.2",
"@types/node": "^10.11.4",
Expand Down Expand Up @@ -231,14 +235,13 @@
"npm-run-all": "^4.0.2",
"opencollective": "^1.0.3",
"polished": "^1.2.1",
"preconstruct": "^0.0.81",
"prettier": "1.14.3",
"puppeteer": "^1.6.0",
"raf": "^3.4.0",
"razzle": "^2.4.0",
"react": "^16.5.2",
"react": "16.14.0",
"react-art": "^16.5.2",
"react-dom": "^16.5.2",
"react-dom": "16.14.0",
"react-helmet": "^5.2.0",
"react-icons": "^2.2.7",
"react-live": "1.10.0",
Expand Down
2 changes: 1 addition & 1 deletion packages/babel-plugin-jsx-pragmatic/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"license": "MIT",
"repository": "https://github.com/emotion-js/emotion/tree/master/packages/babel-plugin-jsx-pragmatic",
"dependencies": {
"@babel/plugin-syntax-jsx": "^7.2.0"
"@babel/plugin-syntax-jsx": "^7.12.1"
},
"peerDependencies": {
"@babel/core": "^7.0.0"
Expand Down
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>}
</>
)
}
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>
)
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
export let Button = props => {
return (
<button
css={{
color: 'hotpink'
}}
{...props}
/>
)
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
export let Button = () => {
return (
<button
css={{
color: 'hotpink'
}}
>
{'Test'}
</button>
)
}
Loading