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

Support jsx/tsx on the api side (for mail templates, ai-jsx, etc) #9133

Merged
merged 3 commits into from
Sep 4, 2023

Conversation

Tobbe
Copy link
Member

@Tobbe Tobbe commented Sep 4, 2023

This is needed to support JSX email templates like

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

/** @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)

@Tobbe Tobbe added this to the next-release milestone Sep 4, 2023
@Tobbe Tobbe added the release:feature This PR introduces a new feature label Sep 4, 2023
@Tobbe Tobbe added release:breaking This PR is a breaking change and removed release:feature This PR introduces a new feature labels Sep 4, 2023
@Tobbe Tobbe enabled auto-merge (squash) September 4, 2023 17:13
@Tobbe Tobbe merged commit 0ff463f into redwoodjs:main Sep 4, 2023
34 of 35 checks passed
@Tobbe Tobbe deleted the tobbe-api-tsx branch September 4, 2023 17:34
jtoar pushed a commit that referenced this pull request Sep 6, 2023
)

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)
@jtoar jtoar modified the milestones: next-release, v6.2.0 Sep 6, 2023
jtoar added a commit that referenced this pull request Sep 13, 2023
#9133 included changes to story
files in the test project fixture. The test project rebuild script
doesn't respect these changes, which I had to make manually to better
conform to the new story format. Unfortunately it's just something I've
been keeping an eye on which isn't sustainable. Just reverting them for
now so CI is testing the right thing.
jtoar added a commit that referenced this pull request Sep 18, 2023
#9133 included changes to story
files in the test project fixture. The test project rebuild script
doesn't respect these changes, which I had to make manually to better
conform to the new story format. Unfortunately it's just something I've
been keeping an eye on which isn't sustainable. Just reverting them for
now so CI is testing the right thing.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
release:breaking This PR is a breaking change
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants