Implement "Contentlet" component in React SDK

Task

Implement a wrapper to render and listen changes about Contentlets out the DotCMSPageBody component

import { createUVESubscription } from '@dotcms/uve';

function Contentlet({ children, Contentlet: contentlet }) {
    const [newContentlet, setNewContentlet] = useState(contentlet);

    useEffect(() => {
        const { unsubscribe } = createUVESubscription(
            `contentlet_change:${contentlet.identifier}`,
            (payload) => {
                // This will only trigger if the contentlet with that identifier has changed
                setNewContentlet(payload);
            }
        );

        return () => unsubscribe();
    }, [contentlet]);

    const newChildren = useMemo(() => {
        return children.map((child) => {
            return React.cloneElement(child, { contentlet: newContentlet });
        });
    }, [children, newContentlet]);

    return <div>{newChildren}</div>;
}

export default Contentlet;

Proposed Objective

Technical User Experience

Proposed Priority

Priority 2 - Important

Acceptance Criteria

• The component can render Contentlets outside PageBody component.
• The component can be editable in UVE
• The component only re-render when the contentlet have changes
• The component have a simple API to integrate to customer projects

Sub-Tasks & Estimates

• [ ] Create a new event like "contentlet-changes"
• [ ] Create a component "Contentlet" to render contentelts outside DotCMSPagebody, including the data-attr
• [ ] Subscribe the component Contentlet to contentlet-changes and re-render only when the appropiate contentlet have changes

Start by locating the React SDK's DotCMSPageBody implementation and existing @dotcms/uve createUVESubscription usage. Define the Contentlet API and event flow from the task, then verify that contentlets render outside PageBody, remain editable in UVE, and re-render only for the changed identifier.