/cem-react-wrapper-issue

Demo repo to visualize a CEM issue wiht React wrapper

Primary LanguageJavaScriptMIT LicenseMIT

cem-react-wrapper-issue

Demo repo to visualize an issue with Custom Element React Wrapper.

This repo consist of a simple Lit component and a plain React application. The Lit component is wrapped with the Custom Element React Wrapper and used in the React application.

The React application uses the @lit-labs/ssr-react to integrate Lit SSR with React.

The issue

The issue is that with default options used on the Custom Element React Wrapper when the wrapper is built; the wrapped component is rendered with a set of attributes which has a undefined value when used in the React application.

When used like this in React:

import { TestBox } from 'cem-react-wrapper-issue-component/react';

export default function App() {
  return (
    <>
      <TestBox custom="test">Test Box - JSX syntax</TestBox>
    </>
  );
}

The rendered DOM look like this:

<test-box custom="test" bespoke="undefined" class="undefined" exportparts="undefined" for="undefined" part="undefined" tabindex="undefined">
    Test Box - JSX syntax
</test-box>

Though; a "fix" seems to be to set the option ssrSafe to true on the options to the Custom Element React Wrapper when the wrapper is built. When done these undefined attributes is not pressent when rendered in React.

Then the rendered DOM looks like this:

<test-box custom="test">
    Test Box - JSX syntax
</test-box>

How to install

This is a workspace repo. Run the following to install dependenceis for the whole repo:

npm install

How to run

To run the demo one need to create a CEM file of the Lit component, then generate the React wrapper out of the CEM file and build the Lit component for consumption in the React application. Then the React application must be built. All this can be done with commands in the root of the workspace.

Build the CEM file and create the React wrapper:

npm run analyze

Built the Lit component for consumption and build the React application:

npm run build

Run the React application:

npm start

The application should now be available on http://localhost:8000/.

How to see the "fix"

In the config to the Custom Element React Wrapper set ssrSafe to true. Then run the steps under "How to run" again to see the change.