Continuation - Base properties for all components

[Mahidhar Chaluvadi]

Hello All.

Here is a feature request for which I do have a code fix. Can you please comment on this, so I can send a PR?

[SPA/StyleSystem] Support for inclusion of Stylesystem props in Sling Models · Issue #1374 · adobe/aem-core-wcm-components (github.com) 

 Is your feature request related to a problem? Please describe.
As of date, leveraging SPAEditor integration comes with limitations like not being able to use Style System capability of AEM, which is very powerful for managing the styles library one may load into the policies. And Core Components on the other hand are a great feature no one wants to rebuild as new components. So to start with we need ability for Core Components to be able to export additional styles to apply, via Sling Models, so it is up to the consumer to leverage that integration. And its for this reason we see a need for this enhancement in this repo.

Describe the solution you'd like
Component interface that we have today in Core Components provides methods like getData to support data layer. Similarly we can provide getStyles or getStylesToAttach for each component, and include the logic to bind component policy and read the styles applied using dialog.

Are there alternatives?
We may be forced to re-do every sling model using the delegation pattern which is not ideal especially when we know we can resolve this issue from one place which shall eventually serve all. We have sample code that is used in this alternative that can go just in one place so there is no need for customizing sling models or write brand new unit tests when using the delegation pattern for things that are inevitable

Documentation
As with normal pages (non SPA), we use the paint brush to select the styles. And now its for the React/Angular components obtain this metadata for styles and wrap their components accordingly. Here is a sample snippet. We exposed sling model to return style props as additionalStyles, and in React we use className attribute to map the value to.

import React from 'react'; import { Heading } from 'my-ui-controls'; import './style.scss' export default (props) => { const renamedProps = (({ type: tag = 'h1', additionalStyles: className = "headerdefault", ...remainingProps }) => ({ tag, className, ...remainingProps }))(props); return <div className="dbp-cmp-title" > <Heading {...renamedProps} /> </div> }  

Thank you !