Describe the bug
When using Node 18 LTS and installing there is an unsupported engine error that occurs.

Package version
1.1.11

To Reproduce
Using Node LTS 18.16.0,

1. Start a new CRA project, (npx create-react-app my-app)
2. Update the package.json file dependencies to be what is below:

"@adobe/aem-core-components-react-base": "^1.1.8",
"@adobe/aem-core-components-react-spa": "^1.2.0",
"@adobe/aem-react-editable-components": "^1.1.10",
"@adobe/aem-spa-component-mapping": "^1.1.1",
"@adobe/aem-spa-page-model-manager": "^1.3.11",
"@testing-library/jest-dom": "^5.15.0",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"

3. Remove node_modules and package-lock.json file/folder
4. run npm i again
5. notice warnings.

Expected behavior
Packages are compatible and compile correctly without unsupported engine notifications.

Screenshots

^ Warnings Image ^

^ Updated Version Image ^

Additional context
Seems you cannot upgrade the package since there are peer dependency issues when using the various adobe spa packages.
using --legacy-peer-deps may introduce unknown stability issues.

Is your feature request related to a problem? Please describe.
We would like to migrate to the latest version of this package (2.x.x) but there is no migration guide and we can't find any examples of how to use the new components with "composition" and move away from class inheritance .

Describe the solution you'd like
A V1 to V2 migration guide or some clear examples of how to use features such as Page and ResponsiveGrid

Describe alternatives you've considered
We have trawled through changelogs, release logs, PRs and unit tests but it is still not clear how to migrate from V1 effectively

Additional context
As a direct example, how would we pass the author components down, like we do for class components with "this.childComponents"

class GenericCmsPage extends Page {
  render() {
   ...
     {this.childComponents}
   ...
  }
}

Describe the bug
When the structureDepth for the AEM project is altered, empty page is displayed on SPA back navigation

Package version
Latest

To Reproduce
Steps to Reproduce - Expected Behavior:
B1. Go to http://localhost.twitter.com:4502/content/wknd-events/react/home.html?wcmmode=disabled
B2. Click "First Article"
B3. At the top of the page, click the (<) looking icon on the right of the yellow nav to go back to the home page
B4. Click "Second Article"
B5. Refresh the page using the browsers refresh button
B6. Click the browser's back button
B7. You should now be on the "home" page, and see content
B8. Click the browser's back button
B9. You should now be on the "First Article" page, and see content

C1. Go to http://localhost.twitter.com:4502/crx/de/index.jsp#/conf/wknd-events/settings/wcm/policies/wknd-events/components/structure/app/default
C2. Change the structureDepth property from 2 to 1

BUG:
With the crx/de update saved, repeat steps B1 - B9.
Step B9 no longer works. The "First Article" page renders as empty.

Screenshots
If applicable, add screenshots to help explain your problem.

Additional context
Add any other context about the problem here.

In version 2.0.0 the Container component was updated to pass props to child components using the "model" prop. This is quite inconvenient because no components that worked with version 1.1.10 can't be reused with version 2.0.0 without changing the props that they are expecting.

This is what the logic looked like in version 1.1.10 where you can see that itemProps are being spread into the ChildComponent.

return <ChildComponent {...itemProps}
   key={itemPath}
   cqPath={itemPath}
   isInEditor={this.props.isInEditor}
   containerProps={this.getItemComponentProps(itemProps, itemKey, itemPath)}/>;

This is what the logic looks like in version 2.0.0 where you can see that the itemProps are passed in as model.

https://github.com/adobe/aem-react-editable-components/blob/master/src/components/Container.tsx#L61

<ItemComponent
    key={itemPath}
    model={itemProps}
    cqPath={itemPath}
    className={itemClassNames}
    removeDefaultStyles={props.removeDefaultStyles}
  />

Is there a benefit to doing this that would justify having to update every components props with a new nested model prop? Seems like a huge amount of rework that could be resolved by just spreading the itemProps like the previous version.

Hello,

I am working with the SPA for my component, the component uses the Responsive Grid to wrap two child components.

e.g.
Responsive Grid ->

• Sub Component 1
• Sub Component 2

However, in this application, we will always have only two components but the spa adds the 'drag components' button, which takes up space and looks out of place.

Is there a way to tell the spa to not add the 'drag components' for the responsive grid?

Alternatively is there any configuration in AEM that might achieve the same effect?

Unlike the other new AEM libraries, the types.d.ts for this project is missing upon installation

Could not find a declaration file for module '@adobe/aem-react-editable-components'. 
Try `npm install @types/adobe__aem-react-editable-components` if it exists or add a new declaration (.d.ts) file containing `declare module '@adobe/aem-react-editable-components';`ts(7016)

The types for this package are not present in node_modules. I thought to check in case they were not in a different folder to dist, but no.

Example Repo with TS error — https://codesandbox.io/s/aem-react-editable-components-cx9q0?file=/src/components/ContentTitle.tsx

Cannot find module '@adobe/aem-react-editable-components' or its corresponding type declarations.ts(2307)

Note the other libraries are also included in the example repo, and do not have TS errors.

Describe the bug
Layout Container not able to register the custom CSS classes defined in the Template Policy. I'm running a React SPA pages in AEM

Package version
v1.1.10 with AEM 6.5.5

To Reproduce

1. Go to any SPA Page template
2. In an existing Layout Container component, go to its template policy
3. Add the custom css class and go back to the template editor page
4. Hover the layout container and add the css class with the Styles icon
5. CSS classes are not being applied to the Layout Container

Expected behavior
The CSS class(es) should be applied to the Layout Container

Screenshots
1.

3. Actual behavior
   

Additional context
Add any other context about the problem here.

Hi,

I am using NextJS 13 with the latest version of this repository, everything seems to work fine so far. I have mimic the "About" page from Wknd site as a training exercise, everything works smoothly using SSR, however when i try to use SSG, the generated page at build time is empty causing that the page renders empty for a couple seconds and then the content loads when the browser parses the JS. The content of the page is fully retrieved from AEM, it is a parsys with several components.

Here is what i am trying to do.

import Head from "next/head";
import WkndLayout from "../../components/WknLayout";
import WkndNav from "../../components/WkndNav";
import {
  ResponsiveGrid,
  fetchModel,
} from "@adobe/aem-react-editable-components";

export default function Wknd({ model, pagePath }) {
  return (
    <WkndLayout>
      <Head>
        <title>Wknd about</title>
      </Head>
        <section>
          <div className="px-2 py-4 mx-auto max-w-[1164px] sm:px-0 lg:px-0 sm:py-2 lg:py-6">
            <ResponsiveGrid
              key={pagePath}
              model={model}
              pagePath={pagePath}
              itemPath="root/responsivegrid"
            />
          </div>
        </section>
    </WkndLayout>
  );
}

export async function getStaticProps(context) {
  const pagePath = "/content/remote-app/us/en/wknd-about-ssg";
  const model = await fetchModel({
    pagePath,
    itemPath: "root/responsivegrid",
    host: process.env.NEXT_PUBLIC_AEM_HOST,
    options: {
      headers: {
        Authorization: "Basic YWRtaW46YWRtaW4=",
      },
    },
  });

  return {
    props: {
      model,
      pagePath,
    },
  };
}

I am new to NextJS and AEM SPA so I just want to understand why this behavior is happening and if this is expected.
Thank you in advance

Sample Code that illustrates the problem

Describe the bug

What is the function of the resourceType in the EditConfig

const TextEditConfig = {    
  emptyLabel:  'Text',
  isEmpty: () => {},
  resourceType: "wknd-app/components/text"
};

It doesn't seem to effect the App if i remove it (and it still requires a MapTo(..))

The problem I am facing is related to way AEM builds React component tree and I was able to narrow it down to the following Adobe product:

https://github.com/adobe/aem-react-editable-components/blob/master/src/components/EditableComponent.tsx

Technically speaking, the above divs are breaking my component styling semantics.

I would like to have an option to decide where I want or not to use these wrapping divs.

Describe the bug
Before SPA 2.0, once the ModelManager recognizes there is root page configured, it retrieves the model.json along with other child pages, if the user clicks on a link that points to another page that's not available in the initial load, it will request the model.json and eventually render that page too. With SPA 2.0, that behavior is lost

Package version
2.0.x

To Reproduce
Steps to reproduce the behavior:

1. Use the WKND SPA app from React/latest branch, and install the same on AEM
2. Launch the app either inside AEM using wcmmode=disabled or run the app locally on 3000 port
3. From the hamburger navigation, click on Page 3, it loads fine even though the initial json doesn't contain this page
4. Now use the React/2.0.0 branch, and install the same on AEM
5. Launch the app in the same way as earlier
6. Now you will see a blank screen when you click on Page 3 from hamburger navigation

Expected behavior
Behavior should be consistent with v1.x implementation as this is a very basic usecase, and shouldn't force us to write a custom implementation. Alternatively a hook or a helper to accomplish the same is also fine i.e. similar to withModel wrapper we had in v1.x

Screenshots
If applicable, add screenshots to help explain your problem.

Expected behavior and working behavior both locally & on AEM (Open Home Page, click on Page 3 link of hamburger menu)
Note: Only screenshot of local app is shared. Didn't share AEM app screenshot as we know it works before SPA 2.0

Changed behavior in SPA 2.0
Note: Only screenshot of AEM app is shared, Can share local app screenshot if required.

Additional context
Add any other context about the problem here.

Describe the bug
PageProps componentMapping property is required in type, however it is treated as optional inside the component. It causes TS errors working with the Page component (error TS2741: Property 'componentMapping' is missing in type)

Package version
"2.1.1"

To Reproduce
Steps to reproduce the behavior:

1. Try to use Page component without componentMapping property and
2. check it with tsc, for example
3. See error: Property 'componentMapping' is missing in type

Expected behavior
No error

Screenshots

Additional context
Components are mapped with MapTo function, that's why componentMapping property is not used

Describe the bug
Components not work with React 17+

Package version
1.1.10

To Reproduce

1. Download package to project with React 17
2. Try to install dependencies

Expected behavior
Components work with newest version

Screenshots

Describe the bug
MapperFunction Typescript return type inconsistency

Package version
1.1.2

To Reproduce
N/A

Expected behavior
The documentation says MapTo's MappFunction returns a component, and yet the return type is void

Screenshots
MapperFunction return type of void

Documentation clearly using the return value as non-void

Additional context
N/A

I worries is that (aem-spa-page-model-manager)-package has been supported for a long time on a limited version of NPM, how about trying to update it to the up-today one?

This may not be an easy task, but I believe that keeping packages up to date will help improve your product and make it more alive.

I remind you that the current version of npm is limited and has '6.14.17' and for up-today we have '8.12.1'

in certain cases a content fragment component needs to be represented as a Container to allow for inter-paragraph parsys injection.

Having a reserved property called model in the Container Props means that a Content Fragment component won't be able to leverage and extend from the default Container implementation due the property 'model' already being reserved for the PageModel object - see: thttps://github.com/adobe/aem-react-editable-components/blob/f61655af0e95bd9de4bf4d5769028a7c0883347f/src/components/Container.tsx#L31

Is your feature request related to a problem? Please describe.
Hello, I would like some quick documentation / an example on how to use the new typescript types with a typescript react component

Describe the solution you'd like
What I think would benefit most as an example would be a custom component that has its own typescript interfaces for props and state and also extends the Container component

Describe alternatives you've considered
There is no alternative documentation related to typescript usage yet, as far as I am aware.

Basically lets say I have this component and I want to have it extend the Container component but keep my interfaces for the props and state. How would I go about doing that?

import React as * from 'react';
import {MapTo, Container} from '@adobe/aem-react-editable-components';

interface CustomComponentProps {
    title: string;
    alignment: string;
}

interface CustomComponentState {
    isCollapsed: boolean;
}

class CustomComponent extends React.Component<CustomComponentProps, CustomComponentState> {
    state = {
       isCollapsed: false
    }

    render() {
        return <h1>This is an example component</h1>
    }
}

export default MapTo('project_name/components/spa/content/customComponent')(CustomComponent)

Describe the bug
I have a wknd spa react application migrated to Next.js, and in AEM I'm using a remote page next. With "aem-react-editable-components" v 1.1.11 everything works fine, but I have issues with 2.0.0 + versions.

The issue is:

• when I'm navigating from /home -> /home/page1 -> /home/page2 each of the pages is properly rendered
  • in page source SSR HTML is correct, NEXT_DATA JSON is correct, and rendered content is correct
• but when I'm returning back to some page which was already visited before (/home/page2 -> /home/page1)
  • rendered content still shows the content from /home/page2
  • the interesting part is that page source SSR HTML is correct and NEXT_DATA JSON is correct, but the content is not rendered correctly
• with hard reload page is always properly rendered

For migration, I was following this page https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/spa-editor/how-to/react-core-components-v2.html?lang=en

v 1.1.11

[...aemPage].js

import {Page, withModel} from '@adobe/aem-react-editable-components';
import React from 'react';
import {Constants} from "@adobe/aem-spa-page-model-manager";
import {getPageModel} from "../utils/SSRUtils";

function AemPage(pageModel) {
    return (
        <Page cqChildren={pageModel[Constants.CHILDREN_PROP]}
              cqItems={pageModel[Constants.ITEMS_PROP]}
              cqItemsOrder={pageModel[Constants.ITEMS_ORDER_PROP]}
              cqPath={pageModel[Constants.PATH_PROP]}/>
    );
}

export default withModel(AemPage);

export async function getServerSideProps(context) {
    return await getPageModel(context);
}

v 2.0.3 - did I miss here something?

[...aemPage].js

import {Page} from '@adobe/aem-react-editable-components';
import React from 'react';
import {Constants} from "@adobe/aem-spa-page-model-manager";
import {getPageModel} from "../utils/SSRUtils";

function AemPage(pageModel) {
    return (
        <Page
              cqChildren={pageModel[Constants.CHILDREN_PROP]}
              cqItems={pageModel[Constants.ITEMS_PROP]}
              cqItemsOrder={pageModel[Constants.ITEMS_ORDER_PROP]}
              cqPath={pageModel[Constants.PATH_PROP]}/>
    );
}

export default AemPage

export async function getServerSideProps(context) {
    return await getPageModel(context);
}

Package version
2.0.3

Describe the bug
Modal manager is able fetch editable in AEM Author environment but unable to render that content on react app when react app which is build (npm run built) and served locally from that built (serve -s build).

Package version
"@adobe/aem-headless-client-js": "^3.1.0",
"@adobe/aem-react-editable-components": "2.0.5",
"@adobe/aem-spa-component-mapping": "1.1.1",
"@adobe/aem-spa-page-model-manager": "1.5.0",
"@babel/plugin-proposal-optional-chaining": "^7.18.9",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^5.3.4",
"react-scripts": "5.0.1",

To Reproduce
Steps to reproduce the behavior:

1. Setup the WKND SPA from the tutorial
2. Delete the setupProxy.js file (removing the proxy)
3. Create Author and Publish environment for WKND SPA
4. configure Modal manager to make calls directly to AEM
   `// index.js
   import ReactDOM from 'react-dom/client';
   import React from 'react';
   import App from './App';
   import { ModelClient, ModelManager } from "@adobe/aem-spa-page-model-manager";

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);

ModelManager.initializeAsync({
modelClient: new ModelClient('https://publish-p47369-e228224.adobeaemcloud.com'),
path: '/content/wknd-app/us/en/home.model.json'
});

root.render(
<React.StrictMode>

</React.StrictMode>
);`

5. run react app locally to see the editable content ("Hello World!") getting rendered
6. built the react app - npm run build
7. run the build locally - serve -s build (Editable content is not being rendered when react app is built)
   Console Error: Uncaught (in promise) TypeError: "l" is read-only
   at e.exports (readOnlyError.js:2:9)
   at aem-react-editable-components.js:1:8433
   at new Promise ()
   at aem-react-editable-components.js:1:8171
   at t (aem-react-editable-components.js:1:8629)
   at aem-react-editable-components.js:1:8754
   at ou (react-dom.production.min.js:244:332)
   at Sc (react-dom.production.min.js:286:111)
   at react-dom.production.min.js:282:391
   at _ (scheduler.production.min.js:13:203)

Expected behavior
Editable Content should be rendered even if the react app is build and served locally

Screenshots
React App served from built:

React App running locally (npm start) able to render "Hello World!" content:

Git Repository

• https://github.com/Jinks1996/AEM-Remote-SPA

Describe the bug
I have Header, Video, Footer coming as part of this.childComponents... Is there a way to lazy load my footer component or have more control on the list of components without breaking in-context editing?

Package version
^1.1.6

To Reproduce
N/A

Expected behavior

• Would be great if there are some useful examples / documentation around these packages.

Screenshots
N/A

Additional context
N/A

Describe the bug
Including this library in a create-react-app (CRA) application does not work with the default browserlist.

Including the library in a CRA app generates an error on starting the dev server with react-scripts start. The error occurs at a ?. optional chaining operator:

./node_modules/@adobe/aem-react-editable-components/dist/aem-react-editable-components.js 393:31
Module parse failed: Unexpected token (393:31)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|         });
| 
>         return !Object.keys(N)?.length && e(), p.ModelManager.addListener(O, e), () => {
|           p.ModelManager.removeListener(O, e);
|         };

Package version
2.0.1

To Reproduce
Steps to reproduce the behavior:

1. Run npx create-react-app my-app
2. Replace the generated files contents with the contents from https://gist.github.com/hannessolo/dffb8b176e2947ec605fce065b57e0ef (in the file names in the gist, replace - with / to get the correct paths)
3. Run npm i && npm run start
4. You will see the error.

Additional context
Its possible to circumvent this error by ejecting CRA and adding a babel config to transpile the library in node_modules. Ideally it should be fixed here though.

Is your feature request related to a problem? Please describe.
While refactoring our existing spa to support 2.0, we realized spa 2.0 made all earlier components functional components which invalidated existing inheritance model in our design. Now components like tabs or carousel or accordion which supports inclusion of child components (mappable) in specific parts of our markup, before 2.0 we were simply rendering child components where needed unlike the ootb container or responsive grid that renders flat. No with 2.0, when using functional components, we no longer have access to this.childComponents and hence we need a way obtain existing component mapping used by topmost container to find the match and render the child component.

Describe the solution you'd like
Either pass the component mapping as a prop to all child components when it is not passed as a prop or make the component mapping exportable or expose it via state hook so we have a single source of truth. Sample snippet below for passing the prop down.

Before:

After:

 <ItemComponent
            key={itemPath}
            model={itemProps}
            cqPath={itemPath}
            componentMapping={componentMapping}
            className={itemClassNames}
            removeDefaultStyles={props.removeDefaultStyles}
          />

Describe alternatives you've considered
In the long shot, we may have to mimic creation of component mapping at application layer and pass as a prop and then use the same wherever we need it just like how it is done in this library. But again, if something so normal can be managed from a central place, why create copies across and duplicate foundational components like Container or page forcing them to pass the mapping

Hi All,

I am using AEM artifact 47 with extending react version to 18 and aem-react-editable-componnets version 2.1.1

I am able to use container component with aem-react-editable-componnets version 2.1.1, but unable to use Tabs component, I have done mapping Tabs component to Core AEM tabs component I am getting below issue

Below is the one using package.json
"dependencies": {
"@adobe/aem-react-editable-components": "^2.1.1",
"@adobe/aem-spa-component-mapping": "1.1.1",
"@adobe/aem-spa-page-model-manager": "1.5.0 ",
"custom-event-polyfill": "^1.0.7",
"history": "^5.3.0",
"neom-ui": "github:NEOM-KSA/Neom-UI#develop",
"react": "^18.2.0",
"react-app-polyfill": "^3.0.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.21.3",
"sanitize-html": "^2.11.0",
"util": "^0.12.5"
},

Here is the code UI.frontend component code
import {
MapTo,
Container,
ResponsiveGrid
} from '@adobe/aem-react-editable-components';

const MyTabsEditConfig = {
emptyLabel: 'Tabs',
isEmpty: function(props){
return !props.cqItemsOrder || !props.cqItemsOrder.length ===0
}
}

const MyTabs = (props) =>

{
const tabItemsInOrder = Container.getChildComponents(props);
const tabItemsJsx = tabItemsInOrder.map((tabItemJsx) =>

export default MapTo('neom-authority-platform/components/tabs')(MyTabs, MyTabsEditConfig);

After integrating the code I am gettin the error
clientlib-react.js:2 TypeError: pe.Container.getChildComponents is not a function
at emptyLabel (clientlib-react.js:2:149121)

Can any one help with This issue

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

No npm token specified.

An npm token must be created and set in the NPM_TOKEN environment variable on your CI environment.

Please make sure to create an npm token and to set it in the NPM_TOKEN environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org/.

Good luck with your project ✨

Your semantic-release bot 📦🚀

Describe the bug
I configured an image in the teaser react core component but the image is not being rendered in the webpage. The teaser core component model is not returning the imagePath value and hence the teaser typescript code is failing the render the image.

Package version
AEM Cloud
Core Components version 2.11.1
JRE version Java(TM) SE Runtime Environment (build 11.0.6+8-LTS)

To Reproduce
Steps to reproduce the behavior:

1. Go to 'http://localhost:4502/editor.html/content/aem-react-core-spacomponents-example/library/teaser.html'
2. Author the teaser example component
3. Drop the asset from DAM
4. Image is not displayed in the webpage

Expected behavior
When the image is authored in teaser component, it has to be displayed in the webpage.

Screenshots

Is your feature request related to a problem? Please describe.
I have a client interested to switch from React client side rendering to Next.js static site generation. However, given that this library is written client-side, we cannot use React Server Components / Next.js App Router.

Describe the solution you'd like
It would be great if we had support for editing React Server Components with AEM Standard Editor or Universal Editor. Competitor CMS systems already have support for visual editing/live preview of React Server Components.
See for example https://www.storyblok.com/tp/add-a-headless-cms-to-next-js-13-in-5-minutes or https://www.contentful.com/blog/integrate-contentful-next-js-app-router/

Describe alternatives you've considered
This library works fine if you stick to the old Next.js Pages Router. However, in that case its is not possible to leverage the best and latest features of React and Next.js. For example the new caching mechanism and full SSG that makes pages perform great on mobile, with Lighthouse scores comparable with Adobe EDS.

Additional context
I really hope this gets prioritized by Adobe, as not every client is open for switching to EDS and plain JS development duo to resource limitations and the fact that frontend devs are much more open to work with React/Next.js stack. I see this approach as a great alternative to EDS providing more flexibility.

For NextJS SSG all Paths should be known
When integrating AEM with NextJS it would be really beneficial to make use of SSG. For this to work all Paths need to be fetched upfront.
Describe the solution you'd like
The best way to achieve this is a similar function to fetchModel but rather fetchPages. A good example how this is solved is from the guys at builder.io. Their builder-client offers this functionality in conjunction with revalidation. Here is an example repo
https://stackblitz.com/edit/nextjs-builder?file=pages%2F[[...page]].tsx

Describe alternatives you've considered
Alternatively one could leverage SSR which is fine but always brings unwanted requests to publisher for static content.

Is your feature request related to a problem? Please describe.
As stated in Issue #1374 - [SPA/StyleSystem] Support for inclusion of Stylesystem props in Sling Models of WCM Core Components git repo, StyleSystem feature is very powerful, and is definitely a win-win situation for content authors and developers as it helps extending available style library. And having this feature in SPA Editor is going to make huge difference

Describe the solution you'd like
As part of PR # 1421 - [StyleSystem/SPAEditor] Allow BaseComponent Sling Model to export CSS classes selected by the content author against WCM Core Components git repo, we are now exposing the style system classes via json property appliedCssClassNames in all Core Components, and the same can be extended for non core components as well. Along with editable attributes, applied css classes can be included making the parent div always hold custom styles applied for the editable component when rendering the custom component based on MapTo registration.

Describe alternatives you've considered
In the referenced PR/Issue, we already stated, that applied Css class names is another prop that application custom component can leverage to render the markup. However it forces the developer to append this CSS classes to className property value (if already existing). In the event this feature request is not approved, this alternative can still be leveraged.

Additional context
Sample screenshots for React Core Component Title with style variations attached here for reference.

Describe the bug
Component style system feature was added with PR https://github.com/adobe/aem-react-editable-components/pull/69/files
It overrides the grid classes for various responsive breakpoints

Package version
>= 1.1.7

To Reproduce
Steps to reproduce the behavior:

1. Create a template with Desktop and other breakpoints (eg. Tablet, Mobile....)
2. Add any sample component on a page created using template in step 1
3. Configure the component on various breakpoints eg. Tablet
4. In View source you can see the breakpoint styles missing...

Expected behavior
Styles from "component style system" and "grid style system" should be combined

Screenshots

Additional context
Add any other context about the problem here.

Describe the bug
If MapTo is not done between a component and a cqType, the Container component will not render it and no logging will be produced.

Package version
1.1.10

To Reproduce
Steps to reproduce the behavior:

1. Create some custom component
2. Forget to MapTo between that component and the cqType or make a typo on it
3. Include that component in a container

Expected behavior
The component is not rendered and the developer gets some visual clue or a log line about what just happened, allowing the developer to suspect of only one or two probable causes.

Actual behavior
The component is not rendered and the developer gets no visual clue nor a log line about what just happened, leaving the developer wondering about a wide variety of possible causes.

Describe the bug
As part of React Editable Comps v1.x we updated EditableComponent to include appliedCssClassNames prop, which shall be passed by the container to EditableComponent which shall wrap the mapped component with div tag that contains className values with inclusion of values from appliedCssClassNames. Due to this feature, stylesystem worked as desired since v1.1.7. This feature is broken with SPA 2.0

Package version
v2.0.0 or above

To Reproduce
Steps to reproduce the behavior:

1. Use WKND tutorial to build AEM SPA with React Editable Components v1.x
2. Upgrade React Editable Comps version to v2.0.5 and refactor the code as stated in README.md of https://github.com/adobe/aem-react-editable-components/tree/master/src/components
3. Enable styles on one of the component
4. Apply them to the component
5. Styles doesn't get injected into the component when rendered by container or responsivegrid

For quick reference you may use the branches below to replicate the issue as shown in screenshots below.

SPA 1.x (React Editable Comps v1.1.11)

Code to deploy -
https://github.com/friendlymahi/aem-guides-wknd-spa/tree/React/latest
Text component has background that you can choose and you shall see skyblue color class appended

Inside AEM Editor:

View as Published Experience:

SPA 2.x (React Editable Comps v2.0.5)

Code to deploy -
https://github.com/friendlymahi/aem-guides-wknd-spa/tree/React/2.0.0
Even though this branch is a fork of original repo from adobe, changes done for text component policy, etc are cascaded/merged from latest branch of the fork into this. Now simply redeploy the code from this branch

Inside AEM Editor:

View as Published Experience:

If you notice React Dev Comps extension, appliedCssClassNames is exposed in model prop and not directly passed as a prop as it was done in 1.x

Expected behavior
Along with other base classes like responsive grid classes, custom styles/appliedCssClassNames shall be appended so the behavior is consistent.

Describe the bug
When using version 2.0.0, no type definitions are included in the package.
They were included in the previous version (1.1.10).

The package.json still specifies where the type information should be found, but no file exists at that path.

Package version
2.0.0

To Reproduce
Use version 2.0.0 in a typescript project and watch typescript lose it's mind.

Expected behavior
The types should be available.

Additional context

Tarball Contents for V1.1.10

$ npm pack --dry-run @adobe/[email protected]
npm notice
npm notice � @adobe/[email protected]
npm notice === Tarball Contents ===
npm notice 5.0kB CHANGELOG.md
npm notice 11.3kB LICENSE
npm notice 2.1kB README.md
npm notice 16.9kB dist/aem-react-editable-components.js
npm notice 1.9kB dist/ComponentMapping.d.ts
npm notice 1.2kB dist/ComponentMapping.d.ts.map
npm notice 1.1kB dist/components/allowedcomponents/AllowedComponentsContainer.d.ts
npm notice 736B dist/components/allowedcomponents/AllowedComponentsContainer.d.ts.map
npm notice 601B dist/components/allowedcomponents/AllowedComponentsPlaceholder.d.ts
npm notice 491B dist/components/allowedcomponents/AllowedComponentsPlaceholder.d.ts.map
npm notice 690B dist/components/allowedcomponents/AllowedComponentsPlaceholderList.d.ts
npm notice 623B dist/components/allowedcomponents/AllowedComponentsPlaceholderList.d.ts.map
npm notice 2.4kB dist/components/Container.d.ts
npm notice 1.3kB dist/components/Container.d.ts.map
npm notice 590B dist/components/ContainerPlaceholder.d.ts
npm notice 457B dist/components/ContainerPlaceholder.d.ts.map
npm notice 4.2kB dist/components/EditableComponent.d.ts
npm notice 861B dist/components/EditableComponent.d.ts.map
npm notice 4.7kB dist/components/ModelProvider.d.ts
npm notice 979B dist/components/ModelProvider.d.ts.map
npm notice 990B dist/components/Page.d.ts
npm notice 831B dist/components/Page.d.ts.map
npm notice 1.0kB dist/components/ResponsiveGrid.d.ts
npm notice 774B dist/components/ResponsiveGrid.d.ts.map
npm notice 1.8kB dist/Constants.d.ts
npm notice 683B dist/Constants.d.ts.map
npm notice 247B dist/EditorContext.d.ts
npm notice 294B dist/EditorContext.d.ts.map
npm notice 464B dist/types.d.ts
npm notice 358B dist/types.d.ts.map
npm notice 1.1kB dist/Utils.d.ts
npm notice 458B dist/Utils.d.ts.map
npm notice 3.2kB package.json
npm notice === Tarball Details ===
npm notice name: @adobe/aem-react-editable-components
npm notice version: 1.1.10
npm notice filename: @adobe/aem-react-editable-components-1.1.10.tgz
npm notice package size: 19.7 kB
npm notice unpacked size: 70.4 kB
npm notice shasum: fcdae680854fb6d29390b60acec7507f9215e88b
npm notice integrity: sha512-NelOm1tk5IG3T[...]TL+bTp3bYZXyw==
npm notice total files: 33
npm notice
adobe-aem-react-editable-components-1.1.10.tgz

Tarball Contents for V2.0.0

$ npm pack --dry-run @adobe/[email protected]
npm notice
npm notice � @adobe/[email protected]
npm notice === Tarball Contents ===
npm notice 11.3kB LICENSE
npm notice 2.8kB README.md
npm notice 9.1kB dist/aem-react-editable-components.js
npm notice 2.7kB dist/coverage/lcov-report/block-navigation.js
npm notice 17.6kB dist/coverage/lcov-report/prettify.js
npm notice 6.2kB dist/coverage/lcov-report/sorter.js
npm notice 3.7kB package.json
npm notice === Tarball Details ===
npm notice name: @adobe/aem-react-editable-components
npm notice version: 2.0.0
npm notice filename: @adobe/aem-react-editable-components-2.0.0.tgz
npm notice package size: 19.2 kB
npm notice unpacked size: 53.4 kB
npm notice shasum: e222daa6f1bc3873c454ef9170003686f1d409db
npm notice integrity: sha512-tCRAJMhJe0p1A[...]UjCqj8Nj/Ap4A==
npm notice total files: 7
npm notice
adobe-aem-react-editable-components-2.0.0.tgz

Is your feature request related to a problem? Please describe.
React spa libraries do not have support for omitting component decoration. In AEM server side rendering eg. using HTL, the component decoration (default is "div") can be skipped by setting cq:NoDecoration=false in component properties

https://experienceleague.adobe.com/docs/experience-manager-65/developing/components/decoration-tag.html?lang=en

Describe the solution you'd like
Adding a property aemNoDecoration=true at the component level (and making it available in model.json) should be respected by the SPA lib and not add div (or other block) wrapper, when NOT in editor mode isInEditor=false...

Describe alternatives you've considered
The following work around implemented in project code was manipulate the DOM causing performance implications...

useEffect(() => {
	jQuery(current).unwrap();
});

Additional context