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.

Sign up for GitHub

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

Jump to bottom

feat: support JSX and TSX in edge functions #161

Merged
merged 4 commits into from
Oct 17, 2022
Merged

feat: support JSX and TSX in edge functions #161

merged 4 commits into from
Oct 17, 2022

Conversation

ascorbic
Copy link
Member

@ascorbic ascorbic commented Oct 13, 2022 •
edited

Which problem is this pull request solving?

Adds support for .jsx and .tsx entrypoints in edge functions

Describe the solution you've chosen

Deno includes out of the box support for jsx and tsx. However edge bundler doesn't recognise these files, so they can't be used for edge functions at the moment. This PR adds .tsx and .jsx to the list of allowed extensions. It allows things like this:

import React from "https://esm.sh/react@18";
import { renderToReadableStream } from "https://esm.sh/v96/react-dom@18.2.0/deno/server.js";

export default async function handler(req: Request) {
  const url = new URL(req.url);
  const username = url.searchParams.get("username");

  if (!username) {
    url.searchParams.set("username", "netlify");
    return Response.redirect(url.toString(), 302);
  }

  const controller = new AbortController();
  let didError = false;
  try {
    const stream = await renderToReadableStream(
      <html>
        <title>Hello</title>
        <body>
          <h1>Hello {username}</h1>
        </body>
      </html>,
      {
        signal: controller.signal,
        onError(error: unknown) {
          didError = true;
          console.error(error);
        },
      },
    );

    return new Response(stream, {
      status: didError ? 500 : 200,
      headers: { "Content-Type": "text/html" },
    });
  } catch (error) {
    return new Response(
      "<!doctype html><p>Something went wrong</p>",
      {
        status: 500,
        headers: { "Content-Type": "text/html" },
      },
    );
  }
}

Describe alternatives you've considered

Importing a JSX file into a separate js or ts entrypoint

Checklist

Please add a x inside each checkbox:

  • I have read the contribution guidelines.
  • The status checks are successful (continuous integration). Those can be seen below.

A picture of a cute animal (not mandatory but encouraged)
so im basically very smol

@ascorbic ascorbic requested a review from a team October 13, 2022 12:35
@github-actions github-actions bot added the type: feature code contributing to the implementation of a feature and/or user facing functionality label Oct 13, 2022
eduardoboucas
eduardoboucas reviewed Oct 14, 2022
View reviewed changes
Copy link
Member

@eduardoboucas eduardoboucas left a comment

Choose a reason for hiding this comment

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

I thought we'd also need to add .jsx/.tsx here? 🤔

@ascorbic
Copy link
Member Author

Aaah, it works locally because it's not in a directory. I'll update this

eduardoboucas
eduardoboucas reviewed Oct 17, 2022
View reviewed changes
node/finder.ts Outdated Show resolved Hide resolved
eduardoboucas
eduardoboucas approved these changes Oct 17, 2022
View reviewed changes
Copy link
Member

@eduardoboucas eduardoboucas left a comment

Choose a reason for hiding this comment

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

✨

@kodiakhq kodiakhq bot merged commit f1a9abb into main Oct 17, 2022
@kodiakhq kodiakhq bot deleted the mk/jsx branch October 17, 2022 11:58
@token-generator-app token-generator-app bot mentioned this pull request Oct 17, 2022
Merged
Skn0tt pushed a commit to netlify/build that referenced this pull request Apr 23, 2024
@ascorbic @kodiakhq
feat: support JSX and TSX in edge functions (netlify/edge-bundler#161)
a9ee1e2 
* feat: support JSX and TSX in edge functions

* chore: include entrypoints in directories

* chore: changes from review

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@eduardoboucas eduardoboucas eduardoboucas approved these changes

Assignees
No one assigned
Labels
automerge type: feature code contributing to the implementation of a feature and/or user facing functionality
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
2 participants
@ascorbic @eduardoboucas