Skip to content

[labs/ssr-react] Lit SSR React integration #3588

@augustjk

Description

@augustjk

Should this be an RFC?

  • This is not a substantial change

Which package is this a feature request for?

SSR (@lit-labs/ssr)

Description

Part of #2391

As it stands, Lit components can be shallowly server rendered by React Server DOM, as in the host element tag will get server rendered without any of its content.

We want a user-friendly way of integrating server-rendering of @lit-labs/ssr to React projects, such that rendering the custom element with React Server DOM will include the contents of the Lit component as a declarative shadow DOM (DSD) child template.

This is a proposal for a new package @lit-labs/ssr-react.

The package would contain:

  1. A patchCreateElement function which takes React.createElement function and enhances it with logic that will add the DSD template element as a child to a registered lit component.
  2. A side-effect module that will use above function to monkey patch React.createElement so users would not have to bring it in and use a separate JSX pragma.
  3. Perhaps an already patched createElement (with a different name) that can be directly imported and used with a @jsx pragma or jsxFactory config.
  4. Package should also be able to serve as jsxImportSource for runtime jsx transform, requiring jsx-runtime and jsx-runtime-dev modules that export Fragment, jsx, jsxs for production use, and Fragment, jsxDEV for development.
    Related RFC: https://github.com/reactjs/rfcs/blob/createlement-rfc/text/0000-create-element-changes.md
    Example implementations: https://github.com/system-ui/theme-ui/blob/develop/packages/core/src/jsx-dev-runtime.ts, https://github.com/emotion-js/emotion/blob/main/packages/react/src/jsx-dev-runtime.js

The usage of this package is going to be primarily with build tools like babel/tsc/swc with modified jsx config, or via bundlers to add the side-effect monkey patch and hijack the react/jsx-runtime imports. As such, there won't be an opportunity for users to provide a different renderInfo for those methods. The patchCreateElement function could be written to take that as an option though.

Alternatives and Workarounds

N/A

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

Status

✅ Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions