Skip to content

Commit

Permalink
Support jsx/tsx on the api side (for mail templates, ai-jsx, etc) (#9133
Browse files Browse the repository at this point in the history 
)

This is needed to support JSX email templates like
```jsx
import { Button } from '@react-email/button';

const Email = () => {
  return (
    <Button href="https://example.com" style={{ color: '#61dafb' }}>
      Click me
    </Button>
  );
};
```

and also ai-jsx code like

```jsx
/** @jsxImportSource ai-jsx */

// ...

toStreamResponse(
  <ChatCompletion temperature={1}>
    <UserMessage>Write me a poem about {topic}</UserMessage>
  </ChatCompletion>
).body
```

The `jsx` tsconfig setting needs to be `react-jsx` to support the
`jsxImportSource` setting:
https://www.typescriptlang.org/tsconfig#jsxImportSource
The babel jsx plugin setting needs to be `automatic` to support
`jsxImportSource` comments:
https://babeljs.io/docs/babel-plugin-transform-react-jsx#customizing-the-automatic-runtime-import

---

@jtoar This one isn't breaking, but it does need codemods. So I added
the `feature-breaking` label to make sure we don't forget about those.
(Feel free to remove that label again if you have a better way of
keeping track)
  • Loading branch information
@Tobbe
Tobbe authored Sep 4, 2023
1 parent 7ee6153 commit 0ff463f
Show file tree
Hide file tree
Showing 14 changed files with 50 additions and 40 deletions.
2 changes: 1 addition & 1 deletion __fixtures__/test-project/api/server.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const config = {
* Note: This configuration does not apply in a serverless deploy.
*/

/** @type {import('@redwoodjs/api-server/dist/fastify').FastifySideConfigFn} */
/** @type {import('@redwoodjs/api-server/dist/types').FastifySideConfigFn} */
const configureFastify = async (fastify, options) => {
if (options.side === 'api') {
fastify.log.trace({ custom: { options } }, 'Configuring api side')
Expand Down
3 changes: 2 additions & 1 deletion __fixtures__/test-project/api/tsconfig.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@
"../node_modules/@types",
"./node_modules/@types"
],
"types": ["jest"]
"types": ["jest"],
"jsx": "react-jsx"
},
"include": [
"src",
Expand Down
2 changes: 1 addition & 1 deletion __fixtures__/test-project/web/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
"devDependencies": {
"@redwoodjs/vite": "6.0.7",
"autoprefixer": "^10.4.15",
"postcss": "^8.4.28",
"postcss": "^8.4.29",
"postcss-loader": "^7.3.3",
"prettier-plugin-tailwindcss": "0.4.1",
"tailwindcss": "^3.3.3"
Expand Down
6 changes: 1 addition & 5 deletions __fixtures__/test-project/web/src/components/Author/Author.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,4 @@ const author = {
fullName: 'Story User',
}

export const Primary: Story = {
render: () => {
return <Author author={author} />
}
}
export const Primary: Story = {}
6 changes: 1 addition & 5 deletions __fixtures__/test-project/web/src/pages/BlogPostPage/BlogPostPage.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,4 @@ export default meta

type Story = StoryObj<typeof BlogPostPage>

export const Primary: Story = {
render: (args) => {
return <BlogPostPage id={42} {...args} />
}
}
export const Primary: Story = {}
4 changes: 1 addition & 3 deletions __fixtures__/test-project/web/src/pages/WaterfallPage/WaterfallPage.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,4 @@ export default meta

type Story = StoryObj<typeof WaterfallPage>

export const Primary: Story = {
render: (args) => <WaterfallPage id={42} {...args} />,
}
export const Primary: Story = {}
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@
"@babel/plugin-transform-nullish-coalescing-operator": "7.22.11",
"@babel/plugin-transform-private-methods": "7.22.5",
"@babel/plugin-transform-private-property-in-object": "7.22.11",
"@babel/plugin-transform-react-jsx": "7.22.15",
"@babel/plugin-transform-runtime": "7.22.10",
"@babel/preset-env": "7.22.14",
"@babel/preset-react": "7.22.5",
Expand Down
1 change: 1 addition & 0 deletions packages/babel-config/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
"@babel/plugin-transform-class-properties": "7.22.5",
"@babel/plugin-transform-private-methods": "7.22.5",
"@babel/plugin-transform-private-property-in-object": "7.22.11",
"@babel/plugin-transform-react-jsx": "7.22.15",
"@babel/plugin-transform-runtime": "7.22.10",
"@babel/preset-env": "7.22.14",
"@babel/preset-react": "7.22.5",
Expand Down
12 changes: 10 additions & 2 deletions packages/babel-config/src/__tests__/api.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ describe('api', () => {
})

describe('getApiSideBabelPresets', () => {
it('just includes `@babel/preset-typescript` by default', () => {
it('only includes `@babel/preset-typescript` by default', () => {
const apiSideBabelPresets = getApiSideBabelPresets()
expect(apiSideBabelPresets).toMatchInlineSnapshot(`
[
Expand Down Expand Up @@ -117,14 +117,15 @@ describe('api', () => {
)

const apiSideBabelPlugins = getApiSideBabelPlugins()
expect(apiSideBabelPlugins).toHaveLength(9)
expect(apiSideBabelPlugins).toHaveLength(10)

const pluginNames = apiSideBabelPlugins.map(([name]) => name)
expect(pluginNames).toMatchInlineSnapshot(`
[
"@babel/plugin-transform-class-properties",
"@babel/plugin-transform-private-methods",
"@babel/plugin-transform-private-property-in-object",
"@babel/plugin-transform-react-jsx",
"@babel/plugin-transform-runtime",
"babel-plugin-module-resolver",
[Function],
Expand Down Expand Up @@ -177,6 +178,13 @@ describe('api', () => {
},
])

expect(apiSideBabelPlugins).toContainEqual([
'@babel/plugin-transform-react-jsx',
{
runtime: 'automatic',
},
])

const [_, babelPluginModuleResolverConfig] = apiSideBabelPlugins.find(
(plugin) => plugin[0] === 'babel-plugin-module-resolver'
)
Expand Down
3 changes: 3 additions & 0 deletions packages/babel-config/src/api.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,9 @@ export const getApiSideBabelPlugins = (

const plugins: TransformOptions['plugins'] = [
...getCommonPlugins(),
// Needed to support `/** @jsxImportSource custom-jsx-library */`
// comments in JSX files
['@babel/plugin-transform-react-jsx', { runtime: 'automatic' }],
['@babel/plugin-transform-runtime', BABEL_PLUGIN_TRANSFORM_RUNTIME_OPTIONS],
[
'babel-plugin-module-resolver',
Expand Down
3 changes: 2 additions & 1 deletion packages/create-redwood-app/templates/js/api/jsconfig.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,8 @@
],
"types": [
"jest"
]
],
"jsx": "react-jsx"
},
"include": [
"src",
Expand Down
3 changes: 2 additions & 1 deletion packages/create-redwood-app/templates/ts/api/tsconfig.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@
"../node_modules/@types",
"./node_modules/@types"
],
"types": ["jest"]
"types": ["jest"],
"jsx": "react-jsx"
},
"include": [
"src",
Expand Down
1 change: 1 addition & 0 deletions packages/internal/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
},
"dependencies": {
"@babel/parser": "7.22.14",
"@babel/plugin-transform-react-jsx": "7.22.15",
"@babel/plugin-transform-typescript": "7.22.11",
"@babel/runtime-corejs3": "7.22.11",
"@babel/traverse": "7.22.11",
Expand Down
43 changes: 23 additions & 20 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -588,12 +588,12 @@ __metadata:
languageName: node
linkType: hard

"@babel/helper-module-imports@npm:^7.22.5":
version: 7.22.5
resolution: "@babel/helper-module-imports@npm:7.22.5"
"@babel/helper-module-imports@npm:^7.22.15, @babel/helper-module-imports@npm:^7.22.5":
version: 7.22.15
resolution: "@babel/helper-module-imports@npm:7.22.15"
dependencies:
"@babel/types": ^7.22.5
checksum: 04f8c0586c485c33017c63e0fc5fc16bd33b883cef3c88e4b3a8bf7bc807b3f9a7bcb9372fbcc01c0a539a5d1cdb477e7bdec77e250669edab00f796683b6b07
"@babel/types": ^7.22.15
checksum: 4e0d7fc36d02c1b8c8b3006dfbfeedf7a367d3334a04934255de5128115ea0bafdeb3e5736a2559917f0653e4e437400d54542da0468e08d3cbc86d3bbfa8f30
languageName: node
linkType: hard

Expand Down Expand Up @@ -688,10 +688,10 @@ __metadata:
languageName: node
linkType: hard

"@babel/helper-validator-identifier@npm:^7.22.5":
version: 7.22.5
resolution: "@babel/helper-validator-identifier@npm:7.22.5"
checksum: 2ff1d3833154d17ccf773b8a71fdc0cd0e7356aa8033179d0e3133787dfb33d97796cbff8b92a97c56268205337dfc720227aeddc677c1bc08ae1b67a95252d7
"@babel/helper-validator-identifier@npm:^7.22.15, @babel/helper-validator-identifier@npm:^7.22.5":
version: 7.22.15
resolution: "@babel/helper-validator-identifier@npm:7.22.15"
checksum: 0473ccfd123cf872206eb916ec506f8963f75db50413560d4d1674aed4cd5d9354826c2514474d6cd40637d3bdc515ba87e8035b4bed683ba62cb607e0081aaf
languageName: node
linkType: hard

Expand Down Expand Up @@ -1626,18 +1626,18 @@ __metadata:
languageName: node
linkType: hard

"@babel/plugin-transform-react-jsx@npm:^7.0.0, @babel/plugin-transform-react-jsx@npm:^7.22.5":
version: 7.22.5
resolution: "@babel/plugin-transform-react-jsx@npm:7.22.5"
"@babel/plugin-transform-react-jsx@npm:7.22.15, @babel/plugin-transform-react-jsx@npm:^7.0.0, @babel/plugin-transform-react-jsx@npm:^7.22.5":
version: 7.22.15
resolution: "@babel/plugin-transform-react-jsx@npm:7.22.15"
dependencies:
"@babel/helper-annotate-as-pure": ^7.22.5
"@babel/helper-module-imports": ^7.22.5
"@babel/helper-module-imports": ^7.22.15
"@babel/helper-plugin-utils": ^7.22.5
"@babel/plugin-syntax-jsx": ^7.22.5
"@babel/types": ^7.22.5
"@babel/types": ^7.22.15
peerDependencies:
"@babel/core": ^7.0.0-0
checksum: fa4e5b32233c41686a420ad97b07a8a8b6cec7d484e93d5917db460887ded5179a8a20867a5d56d962b5452535830c0c0f8bfdc7d55853369be1e51b6a79a14a
checksum: db37491e3eea5530521e177380312f308f01f806866fa0ce08d48fc5a8c9eaf9a954f778fa1ff477248afb72e916eb66ab3d35254bb6a8979f8b8e74a0fd8873
languageName: node
linkType: hard

Expand Down Expand Up @@ -2026,14 +2026,14 @@ __metadata:
languageName: node
linkType: hard

"@babel/types@npm:^7.0.0, @babel/types@npm:^7.1.6, @babel/types@npm:^7.16.8, @babel/types@npm:^7.18.13, @babel/types@npm:^7.2.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.3, @babel/types@npm:^7.22.10, @babel/types@npm:^7.22.11, @babel/types@npm:^7.22.5, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.8.3":
version: 7.22.11
resolution: "@babel/types@npm:7.22.11"
"@babel/types@npm:^7.0.0, @babel/types@npm:^7.1.6, @babel/types@npm:^7.16.8, @babel/types@npm:^7.18.13, @babel/types@npm:^7.2.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.3, @babel/types@npm:^7.22.10, @babel/types@npm:^7.22.11, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.5, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.8.3":
version: 7.22.15
resolution: "@babel/types@npm:7.22.15"
dependencies:
"@babel/helper-string-parser": ^7.22.5
"@babel/helper-validator-identifier": ^7.22.5
"@babel/helper-validator-identifier": ^7.22.15
to-fast-properties: ^2.0.0
checksum: 57632c8c409e604697824dd2799c978681c66e910d5bc4fdad04693a3f3e5d50b1119000d8fb215fcb88d095c6a41470814e4a4f34d8856d7da6781b9c39c53c
checksum: 9324743c1586c59737b7590bbc44acc0b46317b66971fd98867ef4cfa1252ecdab2237a1a62437f579af8a2b41d998aa3efb9e8f0939d7de5f0781e91c7ac1ae
languageName: node
linkType: hard

Expand Down Expand Up @@ -8254,6 +8254,7 @@ __metadata:
"@babel/plugin-transform-class-properties": 7.22.5
"@babel/plugin-transform-private-methods": 7.22.5
"@babel/plugin-transform-private-property-in-object": 7.22.11
"@babel/plugin-transform-react-jsx": 7.22.15
"@babel/plugin-transform-runtime": 7.22.10
"@babel/preset-env": 7.22.14
"@babel/preset-react": 7.22.5
Expand Down Expand Up @@ -8671,6 +8672,7 @@ __metadata:
"@babel/cli": 7.22.10
"@babel/core": 7.22.11
"@babel/parser": 7.22.14
"@babel/plugin-transform-react-jsx": 7.22.15
"@babel/plugin-transform-typescript": 7.22.11
"@babel/runtime-corejs3": 7.22.11
"@babel/traverse": 7.22.11
Expand Down Expand Up @@ -31230,6 +31232,7 @@ __metadata:
"@babel/plugin-transform-nullish-coalescing-operator": 7.22.11
"@babel/plugin-transform-private-methods": 7.22.5
"@babel/plugin-transform-private-property-in-object": 7.22.11
"@babel/plugin-transform-react-jsx": 7.22.15
"@babel/plugin-transform-runtime": 7.22.10
"@babel/preset-env": 7.22.14
"@babel/preset-react": 7.22.5
Expand Down

0 comments on commit 0ff463f

Please sign in to comment.