AEM REACT - What is the correct way to extend core component dialog and implement SPA ?

[goonmanian-gooner]

I am extending all core components, notably the Content Fragment Component, but am running into an issue where nothing is being displayed when I select my content fragment. 
Here is my .content.xml located in apps/cob-corp-acquisition/components/contentfragment

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    cq:styleElements="[div,section,article,main,aside,header,footer]"
    jcr:primaryType="cq:Component"
    jcr:title="Content Fragment"
    sling:resourceSuperType="core/wcm/components/contentfragment/v1/contentfragment"
    componentGroup="cob-corp-acquisition - Content"/>

and my _cq_editConfig.xml also located in apps/cob-corp-acquisition/components/contentfragment

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="cq:EditConfig">
    <cq:inplaceEditing
        jcr:primaryType="cq:InplaceEditingConfig"
        active="{Boolean}true"
        editorType="contentfragment"/>
    <cq:dropTargets jcr:primaryType="nt:unstructured">
        <contentfragment
            jcr:primaryType="cq:DropTargetConfig"
            accept="[application/vnd.adobe.contentfragment]"
            groups="[media]"
            propertyName="./fragmentPath">
            <parameters
                jcr:primaryType="nt:unstructured"
                displayMode="multi"
                elementNames=""
                paragraphHeadings=""
                paragraphRange=""
                paragraphScope=""
                variationName=""/>
        </contentfragment>
    </cq:dropTargets>
    <cq:listeners
        jcr:primaryType="cq:EditListenersConfig"
        afterdelete="function (properties) { $(document).trigger('cq-contentfragment-delete'); }"
        afteredit="function (properties) { $(document).trigger('cq-contentfragment-edit'); }"
        afterinsert="function (properties) { $(document).trigger('cq-contentfragment-insert'); }"/>
</jcr:root>

And here is my SPA implementation located in ui.frontend/src/components/ContentFragment

import React, {PropsWithChildren} from 'react';
import {MappedComponentProperties, MapTo} from '@adobe/aem-react-editable-components';

interface IProps extends MappedComponentProperties {
    displayMode ?: string;
    elementNames ?: string;
    variationName ?: string;
    fragmentPath ?: string;
}

const EditConfig = {
    emptyLabel: 'Content Fragment',
    isEmpty: (props: PropsWithChildren<IProps>) => {
        return !props || !props.fragmentPath;
    }
};

const ContentFragment = (props: PropsWithChildren<IProps>): JSX.Element => {
    console.log(props)
    return (
        <>
            <div>
            </div>
        </>
    )

}


export default MapTo('cob-corp-acquisition/components/contentfragment')(ContentFragment, EditConfig);

Am i supposed to create my own JAVA model/implementation similar to com.adobe.cq.wcm.core.components.internal.models.v1.contentfragment.ContentFragmentImpl or can i just use this existing implemenation? With what I have above I am able to see the component rendered 

and it appears to grab the correct information via http://localhost:4502/content/cob-corp-acquisition/us/en/test.model.json

{
  "componentsResourceTypes": [
    "cob-corp-acquisition/components/contentfragment",
    "wcm/foundation/components/responsivegrid",
    "nt:unstructured",
    "cob-corp-acquisition/components/creditonebank/page-templates/corporate"
  ],
  "brandSlug": "",
  "cssClassNames": "corporate page basicpage",
  "designPath": "/libs/settings/wcm/designs/default",
  "templateName": "cob-corporate",
  "lastModifiedDate": 1662588257614,
  "title": "Test",
  "language": "en",
  ":items": {
    "root": {
      "columnClassNames": {
        "responsivegrid": "aem-GridColumn aem-GridColumn--default--12"
      },
      "gridClassNames": "aem-Grid aem-Grid--12 aem-Grid--default--12",
      "columnCount": 12,
      "allowedComponents": {
        "applicable": false,
        "components": [
          
        ]
      },
      ":items": {
        "responsivegrid": {
          "columnClassNames": {
            "contentfragment": "aem-GridColumn aem-GridColumn--default--12"
          },
          "gridClassNames": "aem-Grid aem-Grid--12 aem-Grid--default--12",
          "columnCount": 12,
          "allowedComponents": {
            "applicable": false,
            "components":[...]
          },
          ":items": {
            "contentfragment": {
              "id": "contentfragment-7db61cc5b3",
              "description": "",
              "title": "Test",
              "elements": {
                "description": {
                  "dataType": "string",
                  "title": "Description",
                  "value": "<p>PP TEXT</p>\n<p>HELLO</p>\n<p>BYBY</p>\n",
                  "multiValue": false,
                  ":type": "text/html"
                }
              },
              "elementsOrder": [
                "description"
              ],
              ":items": {
                
              },
              ":itemsOrder": [
                
              ],
              ":type": "cob-corp-acquisition/components/contentfragment",
              "model": "cob-corp-acquisition/models/rte",
              "dataLayer": {
                "contentfragment-7db61cc5b3": {
                  "@type": "cob-corp-acquisition/components/contentfragment",
                  "repo:modifyDate": "2022-09-07T22:04:17Z",
                  "dc:title": "Test",
                  "elements": [
                    {
                      "xdm:text": "<p>DISPLAY TEST TEXT</p>\n",
                      "xdm:title": "Description"
                    }
                  ]
                }
              }
            }
          },
          ":itemsOrder": [
            "contentfragment"
          ],
          ":type": "wcm/foundation/components/responsivegrid"
        }
      },
      ":itemsOrder": [
        "responsivegrid"
      ],
      ":type": "wcm/foundation/components/responsivegrid"
    }
  },
  ":itemsOrder": [
    "root"
  ],
  ":path": "/content/cob-corp-acquisition/us/en/test",
  ":hierarchyType": "page",
  ":type": "cob-corp-acquisition/components/creditonebank/page-templates/corporate"
}

But I cannot select a content fragment and display the information. How do I fix this? Please and thank you

[arunpatidar]

Hi,

Check if your react component is loading or not.

You may need to add at ui.frontend/src/components/import-components.js 

e.g.

import './Page/Page';
import './Text/Text';
import './Custom/Custom';

[goonmanian-gooner]

Hello @arunpatidar,

I am importing then via the MapTo within my import-components.js

import { MapTo } from '@adobe/aem-react-editable-components';

import {
    ContainerV1, ContainerV1IsEmptyFn
} from '@adobe/aem-core-components-react-spa';

(function importAllComponents() {
    // eslint-disable-next-line
    const componentsContext = require.context('./', true, /^(?!.*import-components).*\/(?!.*test).*\.(js|tsx)$/);
    componentsContext.keys().forEach((key) => componentsContext(key));
})();

MapTo('cob-corp-acquisition/components/container')(ContainerV1, { isEmpty: ContainerV1IsEmptyFn });

and it appears to be loaded correctly within the contextFrame

Is there another step I can take?

[kirthim]

Hi @goonmanian-gooner, I've had a similar issue when I created a custom react component.

All we have to do is, create a component, sling model exporter, react component in ui-frontend module and inclusion of this in import-components.js

Initially after I installed the package, the component didn't load for me. The page was empty, although I could see the component added in crx. But it took sometime, probably after I restarted. 

[goonmanian-gooner]

@kirthim Thanks for responding, I have created several custom components and all work but I cannot manage to get the core components to work correctly for my site. If you have any example of core components sling exporter I would very much appreciate it. Thank you. 

[kirthim]

@goonmanian-gooner , if you're extending the core component in your project and reusing it, it is not necessary to create a model class for this as the json is already rendered.

[goonmanian-gooner]

@arunpatidar Also while looking within the system console found 

Does this need to be filled out? I wouldn't think so as the components work fine for Wknd and weRetail

[arunpatidar]

Hey,

I am also not sure, you can check wknd and we-retail example, to check how they did it.