-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Description
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:
- A
patchCreateElementfunction which takesReact.createElementfunction and enhances it with logic that will add the DSD template element as a child to a registered lit component. - A side-effect module that will use above function to monkey patch
React.createElementso users would not have to bring it in and use a separate JSX pragma. - Perhaps an already patched
createElement(with a different name) that can be directly imported and used with a@jsxpragma orjsxFactoryconfig. - Package should also be able to serve as
jsxImportSourcefor runtime jsx transform, requiringjsx-runtimeandjsx-runtime-devmodules that exportFragment,jsx,jsxsfor production use, andFragment,jsxDEVfor 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
Type
Projects
Status