sinnerschrader / aem-react Goto Github PK

⚛ AEM templates and components based on React for server and client side. Provides a demo content package and core osgi bundle.

Home Page: https://sinnerschrader.github.io/aem-react/

License: MIT License

Java 98.03% JavaScript 1.97%

aem nashorn-engine react javascript universal

aem-react's Introduction

Adobe Experience Manager ("AEM") components written in React

This project makes it possible to render Adobe Experience Manager ("AEM") components via React.

STATUS

Version: 0.4
API is unstable

Documentation

An comprehensive documentation is being developed.

Deploy / install the demo

You can download the demo content package from here and deploy it to your local AEM instance. View the demo

To install the demo locally:

git clone https://github.com/sinnerschrader/aem-react.git

cd aem-react

mvn clean install -PautoInstallPackage -Dgpg.skip=true

##Trouble shooting

Nashorn engine erro: "No such function renderReactComponent"

Check configuration of ReactScriptEngine in webconsole:

go to /system/console/configMgr
search for "react" in the browser
open the configuration of "ReactJs Script Engine Factory"
important: jcr path must be "/etc/designs/react-demo/js/react-demo/server.js/jcr:content"
if it is not then update it.

Background

Nowadays every web application contains at least some highly interactive ui components that are implemented via javascript in the client.

React is one of the most popular javascript web frameworks today. React makes client-side web application development as easy as good old server side web development because of its "render everthing" ansatz. The developer doesn't need to think about the minimal set of dom manipulations to get to the next state of the ui but instead defines the new state and the framework handles the dom manipulation.

React can be directly used in conjunction with AEM for client-side tasks. Unfortunately that means that the dom that Reactjs handles will not be rendered on the server and thus will not be available on first page load and requires extra work to be indexable by search engines. This project makes it possible to render AEM components with React on the server.

License

MIT

Contribution

Contributions are welcome!

The repository contains the OSGI bundle in the folder core. In the folder demo is a demo project that can be used as a starting point for your own project.

OSGI core bundle

The maven module in ./core contains the implementation of the AEM component type and the pool of nashorn engines.

Demo content package

The maven module in ./demo defines a demo content package that includes some example components and demo pages.

Javascript library

The javascript library is required and integrated by the build tools in the demo project.

Dependencies

= Java 8 (Oracle JDK with nashorn engine)
= AEM 6.0

aem-react's People

Contributors

Stargazers

Watchers

aem-react's Issues

No such function renderReactComponent

When any of the react-demo components are loaded on the page, I get a java error saying that no such function renderReactComponent.

I followed the steps in the readme and got the mvn to successfully build.

Let me know if I can provide any additional details.

AEM React maven command

Hi
I am trying to execute AEM react maven command in mac. As mentioned in the document "mvn archetype:generate -DarchetypeGroupId=com.sinnerschrader.aem.react -DarchetypeArtifactId=aem-project-archetype -DarchetypeVersion=10.x”. I am getting below error
Last login: Fri Apr 7 11:31:49 on ttys001
MAC-2Q0G8WM:~ rkadiyal$ mvn archetype:generate -DarchetypeGroupId=com.sinnerschrader.aem.react -DarchetypeArtifactId=aem-project-archetype -DarchetypeVersion=10.1
[INFO] Scanning for projects...
[INFO]
[INFO] ------------------------------------------------------------------------
[INFO] Building Maven Stub Project (No POM) 1
[INFO] ------------------------------------------------------------------------
[INFO]
[INFO] >>> maven-archetype-plugin:3.0.0:generate (default-cli) > generate-sources @ standalone-pom >>>
[INFO]
[INFO] <<< maven-archetype-plugin:3.0.0:generate (default-cli) < generate-sources @ standalone-pom <<<
[INFO]
[INFO] --- maven-archetype-plugin:3.0.0:generate (default-cli) @ standalone-pom ---
[INFO] Generating project in Interactive mode
[INFO] Archetype repository not defined. Using the one from [com.sinnerschrader.aem.react:aem-project-archetype:10.3] found in catalog remote
[WARNING] The POM for com.sinnerschrader.aem.react:aem-project-archetype:jar:10.1 is missing, no dependency information available
[INFO] ------------------------------------------------------------------------
[INFO] BUILD FAILURE
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 17.822 s
[INFO] Finished at: 2017-04-07T11:44:25-05:00
[INFO] Final Memory: 18M/313M
[INFO] ------------------------------------------------------------------------
[ERROR] Failed to execute goal org.apache.maven.plugins:maven-archetype-plugin:3.0.0:generate (default-cli) on project standalone-pom: The desired archetype does not exist (com.sinnerschrader.aem.react:aem-project-archetype:10.1) -> [Help 1]
[ERROR]
[ERROR] To see the full stack trace of the errors, re-run Maven with the -e switch.
[ERROR] Re-run Maven using the -X switch to enable full debug logging.
[ERROR]
[ERROR] For more information about the errors and possible solutions, please read the following articles:
[ERROR] [Help 1] http://cwiki.apache.org/confluence/display/MAVEN/MojoFailureException

AEM React integration

When I am trying to build maven project using the command "mvn archetype:generate
-DarchetypeGroupId=com.sinnerschrader.aem.react
-DarchetypeArtifactId=aem-project-archetype
-DarchetypeVersion=10.2 " I am getting below error: how to proceed?
aemreact ........................................... SUCCESS [ 0.178 s]
[INFO] aemreact - Core .................................... SUCCESS [ 1.492 s]
[INFO] aemreact - UI apps ................................. FAILURE [ 0.192 s]
[INFO] aemreact - UI content .............................. SKIPPED
[INFO] aemreact - Integration Tests Bundles ............... SKIPPED
[INFO] aemreact - Integration Tests Launcher .............. SKIPPED
[INFO] ------------------------------------------------------------------------
[INFO] BUILD FAILURE
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 2.545 s
[INFO] Finished at: 2017-04-07T12:22:25-05:00
[INFO] Final Memory: 23M/406M
[INFO] ------------------------------------------------------------------------
[ERROR] Failed to execute goal org.codehaus.mojo:exec-maven-plugin:1.4.0:exec (npm install) on project aemreact.ui.apps: Command execution failed. Cannot run program "npm" (in directory "/Users/rkadiyal/Desktop/aem-react/aemreact/ui.apps/src/main/ts"): error=2, No such file or directory -> [Help 1]
[ERROR]
[ERROR] To see the full stack trace of the errors, re-run Maven with the -e switch.
[ERROR] Re-run Maven using the -X switch to enable full debug logging.
[ERROR]
[ERROR] For more information about the errors and possible solutions, please read the following articles:
[ERROR] [Help 1] http://cwiki.apache.org/confluence/display/MAVEN/MojoExecutionException
[ERROR]
[ERROR] After correcting the problems, you can resume the build with the command
[ERROR] mvn -rf :aemreact.ui.apps

Transform function in componentRegistry not working

I have a created a transform function to map pass the multifield values of the component dialog as a string prop, instead of a JSON object.

import * as resource from "aem-react-js/component/ResourceComponent";
import ServiceProxy from "aem-react-js/di/ServiceProxy";

let transformList: any = (resource: any, wrapper: resource.ResourceComponent<any, any, any>) => {
  let model: ServiceProxy = wrapper.getResourceModel("com.project.models.ListModel");

  let extractedItems: Array<string> = [];

  if (resource.items && Object.keys(resource.items).length > 0) {
    Object.keys(resource.items).map((element: any) => {
      extractedItems.push(resource.items[element].text);
    });
  }

  let newProps: any = {
    items: extractedItems,
    listItems: extractedItems,
    randomProp: "randomStringValue"
  };

  newProps["array"] = "value assigned via string literal";
  newProps.objectAccessor = "value assigned via object member notation";

  return newProps;
};

export default transform;

This is how I registered my component:

registry.registerVanilla({ component: List, transform: transformList });

The problem is not only the items prop not being converted into an array, but the custom props such as the randomProp and objectAccessor also doesn't show up in my React component's props. Is there something missing here?

Redux integration

Hi,

I read in another post that you have managed to integrate redux with your react components may I ask how did you do this and could you please provide examples.

Thanks

cq:isContainer side effect

Whenever a component has the attribute cq:isContainer set to true, the editing feature to drag and drop any components above or below the said component is disabled.

Create new component

Hi there. I'm trying to adopt your way of integrating React with AEM, but I'm struggling a bit with creating new components.

What is the best way of creating a new component and get it deployed to AEM?
What is the best workflow of getting changes from AEM and back out again into your development environment/files?

I tried to create a new component (just dublicating the 'text' component) within demo/src/main/content/jcr_root/apps/react-demo/components and my watch task starts running and a new component gets created within my AEM instance. However, that components jcr:primaryType is set to sling Folder

The only way I got a new component installed properly was by running the mvn clean install -PautoInstallPackage task but that sort of resets the changes I've made through e.g. the Edit view.

I would like some guidance on how the workflow should be setup for this to work properly both dev environment > AEM and AEM > dev environment.

I'm sitting on a Mac using Sublime Text outside of AEM.

Best regards,
Dan

Cannot load TSLint rule and error instantiating Container

Hi,

Setup is:

Windows 10
AEM 6.2
Latest Archetype
aem-react 4.3 (updated it manually in package.json)

I'm facing the following errors in tslint.json:
Cannot load rule "label-undefined". Internal error while loading the rule with embedded TSLint 5.2.0: Rule is not a function.
this happens for the following rules:

"label-undefined": true
"no-constructor-vars": true
"no-duplicate-key": true
"no-unreachable": true
"use-strict": [
true,
"check-module",
"check-function"
]

Also, I'm seeing the following error in client.tsx and server.tsx:
Supplied parameters do not match any signature of call target.
in this line of code (14):
let container: Container = new Container();

I'm no typescript expert, but I'm guessing the tslint rule no-constructor-vars could potentially solve the errors in client.tsx and server.tsx.

I tried updating tslint to a newer version but it requires me to update typescript to 2.1 at least and that breaks things even more.

I also tried taking the rules out of tslint.json and setting the constructor parameter as optional and that solved the errors in client.tsx and server.tsx. Like so:
constructor(cqx?: Cq);
in Container.d.ts

But now I get this error in the web console:
Uncaught ReferenceError: Cqx is not defined
here:

I'm guessing it's because of the change I made in Container.d.ts so I reverted all changes and I'm back to the errors in tslint.json, client.tsx and server.tsx

Another thing I want to point out is that in the React panel in web tools says waiting for roots to load and doesn't show anything. The webpage itself presents all data. I even manage to edit content, remove components and got a new component showing in the Sidekick but it doesn't render when dragged and dropped.

Please advice and thanks in advance.

AemReact is not defined

When I try to use 'Add Element' on eg. the Accordion component I get the following error:

An error has occured during execution of the selected action: AemReact is not defined -> ReferenceError: AemReact is not defined

I see that in react-cq.js that particular object is defined but for some reason it is not a part of the global scope.

having trouble while binding click event

i am trying to bind the click event in the tsx html, but the event is not binding to corresponding html.
i can see my function code in the source (compiled) file..

Upgrade to React 16

I might be jumping the gun here, but I forked the project and got React v16 working. Are there plans to upgrade to v16 here?

I also added support to toggle client hydration for author mode, which was needed for my projects.

Fork here: https://github.com/sovanyio/aem-react-js

Managing extra markup

A ResourceComponent is rendered dependening on whether it is a root component.

root component

The wrapper element is rendered by AEM in standard fashion. another <div/>is rendered to add the props of the root component. The props are a json string inside a <textarea/>

<wrapper by aem>
    <div data-react-server>
        {{renderBody}}
    </div>
    <textarea/>
</wrapper by aem>

not a root component

If it is not a rot component, then the wrapper element is rendered by the ResourceComponent's render method:

<wrapper by react>
    {{renderBody}}
</wrapper by react>

TODO

make sure that the html is the same in both cases.
relax requirements on renderBody method, so that it allows multiple React.ReactElements to be returned.

issue with multiple routing components in single aem page

I have one aem page in which I am using one routing component (react component) and inside the parsys of that routing component, i am dragging another component having link (react component). The parent react routing component is working fine but the child routing component is not rendering properly.
It is giving below error message -
http://localhost:4502/content/valichome/en/groupprofilemnt/jcr:content/par/my_plan_nav/content.json.html (not found)
http://localhost:4502/content/valichome/en/groupprofilemnt/jcr:content/par/my_plan_nav/content/more.json.html (not found)

So instead of "/my_plan_nav/" it should use "/administration_nav/" in the json path for child component

My actual content node structure is -
/content/valichome/en/administration/jcr:content/par/my_plan_nav/content/more/group_profile_nav - parent component
/content/valichome/en/groupprofilemnt/jcr:content/par/administration_nav/content/more - child component

Need help on this issue.

Uncaught TypeError: _this.cqx.getRequestModel is not a function

I am getting errors when using the ServiceProxy api to get component config.

CarouselComponent.tsx

// ...
private getCarouselModel(carouselPath: string): CarouselModel[] {
  let service: ServiceProxy = this.getRequestModel("com.myproject.react.services.CarouselService");
  let carouselList: CarouselModel[] = service.invoke("getCarouselListModel", carouselPath);
  this.currentPage = service.invoke("getCurrentDepth", carouselPath);

  return carouselList;
}
// ...

CarouselService.java

@Model(adaptables = SlingHttpServletRequest.class)
public class CarouselService {
  @Inject
  private ResourceResolver resourceResolver;

  public List<CarouselModel> getCarouselListModel(String resourcePath) throws PersistenceException {
    // returns proper value
  }

  public String getCurrentDepth(String getPath) {
    // returns proper value
  }
}

I am sure that the methods in CarouselService work properly because I have tried it before. The only thing that broke it is when I restarted my AEM server.

I investigated the return value of getRequestModel and there is a serviceCalls object member. I saw that getCarouselListModel is there but the getCurrentDepth isn't. Is there a way to ensure that the serviceCalls in the ServiceProxy is complete?

(Blocked some parts of the code that can't be publicized)

Build error TS2339 in cityFinder

Hi,

I am getting below error while building -

ERROR in ./cityfinder/CityFinder.tsx
(35,66): error TS2339: Property 'baseResourcePath' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<RouteProps, {} | void>> & RouteProps & {...'.

ERROR in ./cityfinder/CityFinder.tsx
(36,50): error TS2339: Property 'baseResourcePath' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<IndexRouteProps, {} | void>> & IndexRout...'.

ERROR in ./cityfinder/CityFinder.tsx
(37,43): error TS2339: Property 'resourceComponent' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<RouteProps, {} | void>> & RouteProps & {...'.

However my build get completed and say success. But when opening cityFinder from CRX I am getting below error -

Error during include of component '/apps/react-demo/components/city-finder'

Error Message:

org.apache.sling.api.scripting.ScriptEvaluationException: com.sinnerschrader.aem.react.exception.TechnicalException: error rendering react markup
Processing Info:

Page	=	/content/reactdemo/cities	
Resource Path	=	/content/reactdemo/cities/jcr:content/par/city_finder	
Cell	=	city-finder	
Cell Search Path	=	page/par|parsys/city-finder	
Component Path	=	/apps/react-demo/components/city-finder	
Sling Request Progress:

      0 TIMER_START{Request Processing}
      0 COMMENT timer_end format is {<elapsed msec>,<timer name>} <optional message>
      0 LOG Method=GET, PathInfo=/content/reactdemo/cities.html
      0 TIMER_START{ResourceResolution}
      0 TIMER_END{0,ResourceResolution} URI=/content/reactdemo/cities.html resolves to Resource=JcrNodeResource, type=cq:Page, superType=null, path=/content/reactdemo/cities
      0 LOG Resource Path Info: SlingRequestPathInfo: path='/content/reactdemo/cities', selectorString='null', extension='html', suffix='null'
      0 TIMER_START{ServletResolution}

Rest of the components are working fine.

SPA implementation issue

The doc says that the page structure for the SPA must match the routes defined. I used my component with routes as template for the parent page of the SPA however I cannot make the routing work because I am unsure what template should I use for the children pages. Currently, the root page has a template of the component where the routes are defined, and it renders properly.

'dialog' selector

Hello again,

I'm wondering if this is using the '.dialog' selector for the aem components.

I had an issue after installing SP1/SP2 in my AEM 6.1 servers. The React components disappears after editing (to be exact, their content disappears). This issue happen on the TouchUI edit window (editor.html). BTW, we're using aem-react-0.4.0.

For example, I have a React text component. During editing, the editor calls the resource again with the '.dialog' selector to rerender the content. In plain AEM 6.1 server, there is no 'dialog' selector being included, which works fine.

Sample url being called after edit is
http://localhost:4502/content/test/home/jcr:content/structure/par/text_component.html?forceeditcontext=true&_=1489148319496 (no SP) and
http://localhost:4502/content/test/home/jcr:content/structure/par/text_component.dialog.html?forceeditcontext=true&_=1489148319496 (SP1/SP2)

Rendered properly with .dialog selector

<div class="parbase text content">

	<div data-react-server="true" data-react="app" data-react-id="/content/test/home/jcr:content/structure/par/text_component">
		<span data-reactroot="" data-reactid="1" data-react-checksum="1190579901">
			<p data-reactid="2"><!-- react-text: 3 -->Sample text.<!-- /react-text --><br data-reactid="4"/><!-- react-text: 5 -->
			<!-- /react-text --></p><!-- react-text: 6 -->
			<!-- /react-text -->
		</span>
	</div>

<textarea id="/content/test/home/jcr:content/structure/par/text_component" style="display:none;">{&quot;cache&quot;:... other contents...}</textarea>
<cq data-path="/content/test/home/jcr:content/structure/par/text_component" data-config="{...}"></cq>
</div>

This is the source output with the 'dialog' selector

<div class="parbase text content">

<cq data-path="/content/test/home/jcr:content/structure/par/text_component" data-config="{....}"></cq>
</div>

dialog.xml Vs _cq_dialog

Hi,
React component works fine when dialog.xml in the aem component layer but, when i use the touchUI, the new cq:dialog (coralUI) i can't read the properties. I have an error when drag and drop the component
Do you have an idea, please, thanks

Production with `mangle: true` breaks components

In production mode, it's recommended to use mangle: true for UglifyJS. Unfortunately, when we add that option, the mappings of the react components to AEM components gets lost.

Is there a solution for this?

2 level nested child pages

Hey Stefan,

Stuck in a point. Need your help.
I am trying to figure out a way to have like 2 level child page routing.

For example : /cities -> /cities/a, /cities/b -> /cities/a/1 -> /cities/a/2 . But i am not able to make it work . Below is my router configuration:
let indexPath: string = resourceMapping.map(resourcePath);
let pattern: string = resourceMapping.map(resourcePath + "/(:name)");
let pattern2: string = resourceMapping.map(resourcePath + "/(:name)/(:name)");
Router history={history}>
Route path={indexPath} component={Two} baseResourcePath={resourcePath}
Route path={pattern} resourceComponent={resourceComponent} component={ResourceRoute}
Route path={pattern2} component={AdministrationNav} /
/Route
/Route
/Router

loginAdministrative trick does not work anymore with 6.3

Symptoms on 6.3: samples (like http://localhost:4502/editor.html/content/reactdemo/cities.html) render white pages, missing React components in the DOM.

Cause: the com.sinnerschrader.aem.react.ReactScriptEngineFactory component is not started (system/console says "satisfied" but not "activated").
Root Cause: during activation, the component fires an exception because it cannot use loginAdministrative (see [0]). To do so, the package must be added to the Apache Sling Login Admin Whitelist.

Solutions:

Use a subServiceName (not tested)
Add BSN com.sinnerschrader.aem.react.core to the Apache Sling Login Admin Whitelist (add new "Apache Sling Login Admin Whitelist Configuration Fragment" on http://localhost:4502/system/console/configMgr)

A sustainable solution for this project, could be to add the whitelist config, at least to the sample.

Hope this helps someone ;)

[0] https://github.com/sinnerschrader/aem-react/blob/master/core/src/main/java/com/sinnerschrader/aem/react/repo/impl/RepositoryConnectionFactoryImpl.java#L34

Cannot load reactText No renderer for extension html

17.11.2017 15:24:42.677 ERROR [0:0:0:0:0:0:0:1 [1510928682392] GET /content/bgl/en.html HTTP/1.1] org.apache.sling.servlets.get.impl.DefaultGetServlet No renderer for extension html, cannot render resource JcrNodeResource, type=bgl/components/react/text, superType=null, path=/content/bgl/en/jcr:content/par/text_1117894702.

Any suggestions thanks a lot

Install fails

npm WARN deprecated [email protected]: TSD is deprecated in favor of Typings (https://github.com/typings/typings) - see https://github.com/DefinitelyTyped/tsd/issues/269 for more information
npm WARN deprecated [email protected]: Jade has been renamed to pug, please install the latest version of pug instead of jade
npm WARN deprecated [email protected]: graceful-fs version 3 and before will fail on newer node releases. Please update to graceful-fs@^4.0.0 as soon as possible.
npm WARN deprecated [email protected]: graceful-fs version 3 and before will fail on newer node releases. Please update to graceful-fs@^4.0.0 as soon as possible.

> [email protected] preinstall /Users/dm/aem-react/demo/src/main/ts/node_modules/.staging/aem-react-js-68c9b957
> npm install typescript & tsd install

sh: tsd: command not found

Performance on 0.22

Have another one for you :) https://github.com/sovanyio/aem-react/tree/compile-at-start

On the older branch of 0.4.2, we were running into server lag issues that seem to have stemmed from not setting the maxIdle setting on the ObjectPool, leading to object churn. In debugging that, we figured that warming all objects in the pool at start would be best for performance. With the pool set at 30 I'm seeing around 1m30s-2m warming runs with performant renders after that and no random server lagging due to object churn.

I also went ahead and moved the created engine log to a debug message and logged exceptions out directly from the library. Also added support for writing exceptions to the page if the param debug is set in the request url.

Let me know what you think, I'll create a PR if you think its good.

CSS Styling options

What is the current solution to styling the react components such that they work both Server & Client side?

I've tried using a number of inline styling libraries (styled-jsx, Radium, etc) however they all fail to work. The closest we've gotten is styled-component on the client side.

Any suggestions?

Configuration clarifications for ReactScriptEngineFactory

Hello,

Would like to know what will be the behavior for the ff:

If there are multiple entries 'scripts.paths', what would be the behavior for this? which will be the initial files to be loaded? what would happen on duplicate entries?
What is the ideal max size for each script on 'scripts.paths'?
For 'scripts.reload', i think should be set to false on prod. Is my assumption correct?
For 'pool.total.size', is there a calculator for the ideal pool size depending on the machine? How did you come up with 30?

Thank you!

Uncaught TypeError: _this.cqx.getRequestModel is not a function

I am getting errors when using the ServiceProxy api to get component config. Here's the code:

Package.json doesn't match the Readme.md for the demo

In the package.json for the demo the config doesn't match the standard port or what's reported in the readme.
"config": { "crx": "http://admin:admin@localhost:4602/crx/repository/crx.default" },

why it's empty jsx file in React component?

hi,

I want to know why there is empty jsx files in React component?

And when I follow the document, I got an error.

Performance and concurrency

Hi,

I'm looking at this project from a performance point of view. My first load-testing experiments seem to show that requests involving React server-side rendering get increasingly slower with increased concurrency - two orders of magnitude slower with just about twenty concurrent requests and it gets worse.

I'm not sure what's the root cause for that, but I've tried replacing the engine pool with ThreadLocal engines and it seemed to behave better, as Jetty seems to keep its pool of threads anyway - and engines don't get instantiated and warmed too often.

Have you noticed any performance issue of that kind when using aem-react? Do you expect the caching mechanisms in AEM - perhaps the Dispatcher - to amortise the cost of rendering the content dynamically? Is that a non-issue in practice?

Is getOsgiService not supposed to be called inside a transform?

My goal is to retrieve all the component's data in the transform function so that they can all be accessed using this.props.

I am currently using getOsgiService inside the component's renderBody function. But, like I said, the goal is to get all props inside the transform function. A step for following the Single Responsibility Principle. However, when I place the exact same code I was using inside my component, I get an error that says:

Caused by: <eval>:1561 TypeError: null has no such function "invoke"

It looks like it is not an intended behavior but if it is, I suggest that we change it.

Use ReactDOM.render from require('react-dom') instead.

Hi,

Please consider replacing deprecated React.render and React.renderToString with ReactDOM.render ReactDOMServer.renderToString

They are used in In ComponentManager.tsx and ServerRenderer.tsx

SPA Implementation issue with mappings enabled

Good day! I would like to ask for help regarding SPA implementation. We have been using AEM mappings in our publish server, causing the path used by the ResourceRoute component become incorrect because it doesnt match any resource in the AEM instance (A screenshot of the console error is attached to the bottom of this post). This is the mappings config we're using:

# /project.company.com/.content.xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="sling:Mapping"
    sling:internalRedirect="[/content/project/home,/]">
    <redirect/>
</jcr:root>

# /project.company.com/redirect/.content.xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="sling:Mapping"
    sling:internalRedirect="[/content/project/home/$1,/$1]"
    sling:match="(.+)$"/>

Are there any modifications I need to make on the source code to enable support for mappings like the one mentioned above? Thanks in advance.

Is in place editing possible with this library?

I can't seem to find any example/demo code that shows this or enables this. We are trying to implement multiple in-place editors within react components as documented here:
https://docs.adobe.com/docs/en/aem/6-2/develop/components/multiple-inplace-editors.html

Transformation of resource for vanilla components

Automatically converting a vanilla (plain) react component into an AEM component should support the transformation of the resource to props.

AEM total page change on routing

Thank you for this amazing api. It really helps a lot.

I have a question. Can you please let me know if we have a navigation on the aem page , on click of navigation link(basically routing in react) since it is an SPA. How do we can change the total content of the page.

Like if there s a page-country which contains 3 child pages, so basically on click of the navigation link on country page , it should show the total content from AEM child page, not only a section

Nashorn JS use and clientside rendering?

Can you please explain the reason of use nashorn JS in this library. Is it for compiling the .jsx file. Then how the react code gets mapped to .jsx files? What is the use of reactserver.js? is it only executed in author mode?

Compilation error with scripts

Hi,

I am facing compilation error while building the project. Build is success but scripts are not compiled successfully. Please find the error below:

ERROR in ./componentRegistry.tsx
(10,45): error TS2345: Argument of type '{ component: typeof Panel; parsysPath: string; depth: number; }' is not assignable to parameter of type 'ComponentConfig'.
Object literal may only specify known properties, and 'parsysPath' does not exist in type 'ComponentConfig'.

ERROR in C:\projects\react-poc\eon.com.react\ui.apps\src\main\ts\server.tsx
(20,32): error TS2346: Supplied parameters do not match any signature of call target.

ERROR in ./client.tsx
(14,28): error TS2346: Supplied parameters do not match any signature of call target.
Webpack build for 'development' -> reactserver
jcrpath 'C:\projects\react-poc\eon.com.react\ui.apps\target\classes\etc\designs\eon-com-react\clientlib-site
env "production"
ts-loader: Using [email protected] and C:\projects\react-poc\eon.com.react\ui.apps\src\main\ts\tsconfig.json
Hash: 242d068f8068d0eb3521
Version: webpack 1.15.0
Time: 14448ms
Asset Size Chunks Chunk Names
reactserver.js 1.99 MB 0 [emitted] reactserver
+ 216 hidden modules

ERROR in ./server.tsx
(20,32): error TS2346: Supplied parameters do not match any signature of call target.

ERROR in C:\projects\react-poc\eon.com.react\ui.apps\src\main\ts\client.tsx
(14,28): error TS2346: Supplied parameters do not match any signature of call target.

What could be wrong with the setup?

Issue building: failure on sign-artifacts

Hi there,

Testing this package out, found one error building initially:

 △ projects/Pulls/aem-react mvn clean install -PautoInstallPackage -e                                                                                                                            
[INFO] Error stacktraces are turned on.
[INFO] Scanning for projects...
[INFO] Inspecting build with total of 4 modules...
[INFO] Installing Nexus Staging features:
[INFO]   ... total of 4 executions of maven-deploy-plugin replaced with nexus-staging-maven-plugin
[INFO] ------------------------------------------------------------------------
[INFO] Reactor Build Order:
[INFO]
[INFO] aem react
[INFO] website - Core
[INFO] website - demo core
[INFO] website - UI apps
[INFO]
[INFO] ------------------------------------------------------------------------
[INFO] Building aem react 0.4.3-SNAPSHOT
[INFO] ------------------------------------------------------------------------
[INFO]
[INFO] --- maven-clean-plugin:2.6.1:clean (default-clean) @ aem-react ---
[INFO] Deleting /Users/greg.parsons/projects/Pulls/aem-react/target
[INFO]
[INFO] --- maven-enforcer-plugin:1.4:enforce (enforce-maven) @ aem-react ---
[INFO]
[INFO] --- maven-gpg-plugin:1.5:sign (sign-artifacts) @ aem-react ---
/bin/sh: gpg: command not found
[INFO] ------------------------------------------------------------------------
[INFO] Reactor Summary:
[INFO]
[INFO] aem react .......................................... FAILURE [  0.396 s]
[INFO] website - Core ..................................... SKIPPED
[INFO] website - demo core ................................ SKIPPED
[INFO] website - UI apps .................................. SKIPPED
[INFO] ------------------------------------------------------------------------
[INFO] BUILD FAILURE
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 1.346 s
[INFO] Finished at: 2017-04-10T15:42:32-07:00
[INFO] Final Memory: 17M/367M
[INFO] ------------------------------------------------------------------------
[ERROR] Failed to execute goal org.apache.maven.plugins:maven-gpg-plugin:1.5:sign (sign-artifacts) on project aem-react: Exit code: 127 -> [Help 1]
org.apache.maven.lifecycle.LifecycleExecutionException: Failed to execute goal org.apache.maven.plugins:maven-gpg-plugin:1.5:sign (sign-artifacts) on project aem-react: Exit code: 127
	at org.apache.maven.lifecycle.internal.MojoExecutor.execute(MojoExecutor.java:212)
	at org.apache.maven.lifecycle.internal.MojoExecutor.execute(MojoExecutor.java:153)
	at org.apache.maven.lifecycle.internal.MojoExecutor.execute(MojoExecutor.java:145)
	at org.apache.maven.lifecycle.internal.LifecycleModuleBuilder.buildProject(LifecycleModuleBuilder.java:116)
	at org.apache.maven.lifecycle.internal.LifecycleModuleBuilder.buildProject(LifecycleModuleBuilder.java:80)
	at org.apache.maven.lifecycle.internal.builder.singlethreaded.SingleThreadedBuilder.build(SingleThreadedBuilder.java:51)
	at org.apache.maven.lifecycle.internal.LifecycleStarter.execute(LifecycleStarter.java:128)
	at org.apache.maven.DefaultMaven.doExecute(DefaultMaven.java:307)
	at org.apache.maven.DefaultMaven.doExecute(DefaultMaven.java:193)
	at org.apache.maven.DefaultMaven.execute(DefaultMaven.java:106)
	at org.apache.maven.cli.MavenCli.execute(MavenCli.java:863)
	at org.apache.maven.cli.MavenCli.doMain(MavenCli.java:288)
	at org.apache.maven.cli.MavenCli.main(MavenCli.java:199)
	at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
	at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
	at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
	at java.lang.reflect.Method.invoke(Method.java:498)
	at org.codehaus.plexus.classworlds.launcher.Launcher.launchEnhanced(Launcher.java:289)
	at org.codehaus.plexus.classworlds.launcher.Launcher.launch(Launcher.java:229)
	at org.codehaus.plexus.classworlds.launcher.Launcher.mainWithExitCode(Launcher.java:415)
	at org.codehaus.plexus.classworlds.launcher.Launcher.main(Launcher.java:356)
Caused by: org.apache.maven.plugin.MojoExecutionException: Exit code: 127
	at org.apache.maven.plugin.gpg.GpgSigner.generateSignatureForFile(GpgSigner.java:168)
	at org.apache.maven.plugin.gpg.AbstractGpgSigner.generateSignatureForArtifact(AbstractGpgSigner.java:205)
	at org.apache.maven.plugin.gpg.GpgSignAttachedMojo.execute(GpgSignAttachedMojo.java:176)
	at org.apache.maven.plugin.DefaultBuildPluginManager.executeMojo(DefaultBuildPluginManager.java:134)
	at org.apache.maven.lifecycle.internal.MojoExecutor.execute(MojoExecutor.java:207)
	... 20 more
[ERROR]
[ERROR] Re-run Maven using the -X switch to enable full debug logging.
[ERROR]
[ERROR] For more information about the errors and possible solutions, please read the following articles:
[ERROR] [Help 1] http://cwiki.apache.org/confluence/display/MAVEN/MojoExecutionException

Commenting out this section in the root pom allows me to proceed:

    <plugin>
      <groupId>org.apache.maven.plugins</groupId>
      <artifactId>maven-gpg-plugin</artifactId>
      <version>1.5</version>
      <executions>
        <execution>
          <id>sign-artifacts</id>
          <phase>verify</phase>
          <goals>
            <goal>sign</goal>
          </goals>
        </execution>
      </executions>
    </plugin>

multiple react content packages

Currently it is not possible to install multiple content packages that include react components in a single AEM instance - at least with the build process in the archetype. The reason is that the basic react functionality from aem-react-js is bundled with the react components.

TODOs

chunks
Separate base functionality into common chunk.
The bundled javascript must be separated into separate chunks. One chunk contains the common functionality and then there will be a chunk for each content package.
versions
Additionally we need to take into account different versions of aem-react-js. Each content package is compiled against a specific version, while the script engine can currently only use a single. It is possible to support different versions of aem-react-js inside the script engine but then the contained react components cannot be rendered in the same react component tree.
deployment
Each content package could deploy a react script engine client. All clients are managed by the single script engine. The script engine consult the client which contains the react component before rendering. If there are multiple clients with the same aem-react-js dependency then the they shoudl be rendered in a single javascript engine. Hence there will be javascript engines specific to aem-react-js version. The ReactParsys must also include child components dependeing on their compatibilty with the current javascript engine.

AemReact is not defined


An error has occured during execution of the selected action: AemReact is not defined -> ReferenceError: AemReact is not defined
    at constructor.eval (eval at <anonymous> (http://localhost:4505/libs/cq/gui/components/authoring/editors/clientlibs/core.js:1917:23), <anonymous>:1:13)
    at constructor.handleEvent (http://localhost:4505/libs/cq/gui/components/authoring/editors/clientlibs/core.js:19321:41)
    at HTMLDivElement.dispatch (http://localhost:4505/etc/clientlibs/granite/jquery.js:4665:9)
    at HTMLDivElement.elemData.handle (http://localhost:4505/etc/clientlibs/granite/jquery.js:4333:28)

Question: Setup Template page

Hi,

How would you go on about creating a template with react with some predefined drop areas? I would like to just do a basic example of a page where I have a template that contains a react header and a react sidebar, where I can drag react components into.

Question: ReactScriptEngineFactory subServiceName

In ReactScriptEngineFactory class, we have a property called PROPERTY_SUBSERVICENAME. It's not set in the configurable properties though. Does this mean that we are using the resResFactory.getAdministrativeResourceResolver(null); (See RepositoryConnectionFactoryImpl.java) for the services to work?

Is it okay to expose this property and have it configured in the web console?

AEM React

In this link https://sinnerschrader.github.io/aem-react project, below lines are used to create maven project:
mvn archetype:generate
-DarchetypeGroupId=com.sinnerschrader.aem.react
-DarchetypeArtifactId=aem-project-archetype
-DarchetypeVersion=10.2
But the components created by the above command is not working. How to create react components in AEM. Can you please share the complete documentation?

Render components in a non-AEM context/environment

Hi,

So to have some rapid component development, I'm using React Storybook (https://github.com/kadirahq/react-storybook) and it works great. I have it working with typescript like this:

import * as React from 'react'

interface IButtonProps {
  clickHandler?: () => void
  propText? : string
}

export default class Button extends React.Component<IButtonProps, any> {

  constructor(props : IButtonProps) {
    super(props)
  }

  public render() : React.ReactElement<any> {
    const { clickHandler, propText } = this.props
    const text = propText ? propText : 'My text'

    return <button onClick={clickHandler}>{text}</button>
  }
}

However, when I try and extend ResourceComponentinstead like the following:

import * as React from 'react'
import { ResourceComponent, Resource, ResourceProps } from 'aem-react-js/component/ResourceComponent'

interface IButtonProps extends ResourceProps<any> {
  clickHandler?: () => void
  propText? : string
}

export default class Button extends ResourceComponent<any, IButtonProps, any> {

  constructor(props : IButtonProps) {
    super(props)
  }

  public renderBody() : React.ReactElement<any> {
    const { clickHandler, propText } = this.props
    const text = propText ? propText : 'My text - bla bla'

    return <button onClick={clickHandler}>{text}</button>
  }
}

Error: Cannot read property 'registry' of undefined
Button.ResourceComponent.getResourceType
webpack:///~/aem-react-js/component/ResourceComponent.js:63:39
Button.ResourceComponent.render
webpack:///~/aem-react-js/component/ResourceComponent.js:41:144
ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext
webpack:///~/react/lib/ReactCompositeComponent.js:587:34
ReactCompositeComponentMixin._renderValidatedComponent
webpack:///~/react/lib/ReactCompositeComponent.js:607:32
wrapper [as _renderValidatedComponent]
webpack:///~/react/lib/ReactPerf.js:66:21
ReactCompositeComponentMixin.mountComponent
webpack:///~/react/lib/ReactCompositeComponent.js:220:30
wrapper [as mountComponent]
webpack:///~/react/lib/ReactPerf.js:66:21
Object.ReactReconciler.mountComponent
webpack:///~/react/lib/ReactReconciler.js:37:35
ReactCompositeComponentMixin.mountComponent
webpack:///~/react/lib/ReactCompositeComponent.js:225:34
wrapper [as mountComponent]
webpack:///~/react/lib/ReactPerf.js:66:21

and

I am just wondering if there is a way to have my AEM-react components render and live outside of AEM for testing/development purposes?

Archetype install issue

Hello,

Following the documentation, I'm trying to install aem-react using the archetype (10.3).
But on mvn install -PautoInstallPackage says some classes are missing ";".
Full error:

[INFO] ------------------------------------------------------------------------
[INFO] Reactor Build Order:
[INFO]
[INFO] react-test
[INFO] react-test - Core
[INFO] react-test - UI apps
[INFO] react-test - UI content
[INFO] react-test - Integration Tests Bundles
[INFO] react-test - Integration Tests Launcher
[INFO]
[INFO] ------------------------------------------------------------------------
[INFO] Building react-test 1.0-SNAPSHOT
[INFO] ------------------------------------------------------------------------
[INFO]
[INFO] --- maven-enforcer-plugin:1.4:enforce (enforce-maven) @ react-test ---
[INFO]
[INFO] --- maven-install-plugin:2.5.2:install (default-install) @ react-test ---
[INFO] Installing /Users/r00353/Projects/Sandbox/AEM/react-test/pom.xml to /Users/r00353/.m2/repository/react-test-group-id/react-test/1.0-SNAPSHOT/react-test-1.0-SNAPSHOT.pom
[INFO]
[INFO] ------------------------------------------------------------------------
[INFO] Building react-test - Core 1.0-SNAPSHOT
[INFO] ------------------------------------------------------------------------
[INFO]
[INFO] --- maven-enforcer-plugin:1.4:enforce (enforce-maven) @ react-test.core ---
[INFO]
[INFO] --- maven-resources-plugin:2.7:resources (default-resources) @ react-test.core ---
[INFO] Using 'UTF-8' encoding to copy filtered resources.
[INFO] skip non existing resourceDirectory /Users/r00353/Projects/Sandbox/AEM/react-test/core/src/main/resources
[INFO]
[INFO] --- maven-compiler-plugin:3.2:compile (default-compile) @ react-test.core ---
[INFO] Changes detected - recompiling the module!
[INFO] Compiling 9 source files to /Users/r00353/Projects/Sandbox/AEM/react-test/core/target/classes
[INFO] -------------------------------------------------------------
[ERROR] COMPILATION ERROR :
[INFO] -------------------------------------------------------------
[ERROR] /Users/r00353/Projects/Sandbox/AEM/react-test/core/src/main/java/com/test/react-test/core/listeners/SimpleResourceListener.java:[16,23] ';' expected
[ERROR] /Users/r00353/Projects/Sandbox/AEM/react-test/core/src/main/java/com/test/react-test/core/react/StoreLocatorService.java:[1,23] ';' expected
[ERROR] /Users/r00353/Projects/Sandbox/AEM/react-test/core/src/main/java/com/test/react-test/core/package-info.java:[18,23] ';' expected
[ERROR] /Users/r00353/Projects/Sandbox/AEM/react-test/core/src/main/java/com/test/react-test/core/schedulers/SimpleScheduledTask.java:[16,23] ';' expected
[ERROR] /Users/r00353/Projects/Sandbox/AEM/react-test/core/src/main/java/com/test/react-test/core/models/HelloWorldModel.java:[16,23] ';' expected
[ERROR] /Users/r00353/Projects/Sandbox/AEM/react-test/core/src/main/java/com/test/react-test/core/react/Store.java:[1,23] ';' expected
[ERROR] /Users/r00353/Projects/Sandbox/AEM/react-test/core/src/main/java/com/test/react-test/core/filters/LoggingFilter.java:[16,23] ';' expected
[ERROR] /Users/r00353/Projects/Sandbox/AEM/react-test/core/src/main/java/com/test/react-test/core/servlets/SimpleServlet.java:[16,23] ';' expected
[ERROR] /Users/r00353/Projects/Sandbox/AEM/react-test/core/src/main/java/com/test/react-test/core/react/StoreLocatorServiceImpl.java:[1,23] ';' expected
[INFO] 9 errors
[INFO] -------------------------------------------------------------
[INFO] ------------------------------------------------------------------------
[INFO] Reactor Summary:
[INFO]
[INFO] react-test ......................................... SUCCESS [  0.228 s]
[INFO] react-test - Core .................................. FAILURE [  0.621 s]
[INFO] react-test - UI apps ............................... SKIPPED
[INFO] react-test - UI content ............................ SKIPPED
[INFO] react-test - Integration Tests Bundles ............. SKIPPED
[INFO] react-test - Integration Tests Launcher ............ SKIPPED
[INFO] ------------------------------------------------------------------------
[INFO] BUILD FAILURE
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 1.581 s
[INFO] Finished at: 2017-05-11T19:30:56+02:00
[INFO] Final Memory: 19M/309M
[INFO] ------------------------------------------------------------------------
[ERROR] Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.2:compile (default-compile) on project react-test.core: Compilation failure: Compilation failure:
[ERROR] /Users/r00353/Projects/Sandbox/AEM/react-test/core/src/main/java/com/test/react-test/core/listeners/SimpleResourceListener.java:[16,23] ';' expected
[ERROR] /Users/r00353/Projects/Sandbox/AEM/react-test/core/src/main/java/com/test/react-test/core/react/StoreLocatorService.java:[1,23] ';' expected
[ERROR] /Users/r00353/Projects/Sandbox/AEM/react-test/core/src/main/java/com/test/react-test/core/package-info.java:[18,23] ';' expected
[ERROR] /Users/r00353/Projects/Sandbox/AEM/react-test/core/src/main/java/com/test/react-test/core/schedulers/SimpleScheduledTask.java:[16,23] ';' expected
[ERROR] /Users/r00353/Projects/Sandbox/AEM/react-test/core/src/main/java/com/test/react-test/core/models/HelloWorldModel.java:[16,23] ';' expected
[ERROR] /Users/r00353/Projects/Sandbox/AEM/react-test/core/src/main/java/com/test/react-test/core/react/Store.java:[1,23] ';' expected
[ERROR] /Users/r00353/Projects/Sandbox/AEM/react-test/core/src/main/java/com/test/react-test/core/filters/LoggingFilter.java:[16,23] ';' expected
[ERROR] /Users/r00353/Projects/Sandbox/AEM/react-test/core/src/main/java/com/test/react-test/core/servlets/SimpleServlet.java:[16,23] ';' expected
[ERROR] /Users/r00353/Projects/Sandbox/AEM/react-test/core/src/main/java/com/test/react-test/core/react/StoreLocatorServiceImpl.java:[1,23] ';' expected
[ERROR] -> [Help 1]
[ERROR]
[ERROR] To see the full stack trace of the errors, re-run Maven with the -e switch.
[ERROR] Re-run Maven using the -X switch to enable full debug logging.
[ERROR]
[ERROR] For more information about the errors and possible solutions, please read the following articles:
[ERROR] [Help 1] http://cwiki.apache.org/confluence/display/MAVEN/MojoFailureException
[ERROR]
[ERROR] After correcting the problems, you can resume the build with the command
[ERROR]   mvn <goals> -rf :react-test.core

registry.registerVanilla() with parsys not working

Firstly thanks for the great work with aem-react.

When I try to use the Panel component on any page (e.g. overview) and add any component (e.g. text) into it, it initially shows after adding, but when reloading the page it disapears.

from looking at your code:
registry.registerVanilla({component: Panel, parsys: {path: "content"}, depth: 2});
I think the expected behaviour would be a parsys node in the Panel node that is called 'conent'. Instead, in crx, I see the added 'text' component directly under the panel node, that then does not render.

If I add a parsys node into the Panel node and move the text in there, I do see the text rednered. Interestingly, in edit-mode, I still don't see the parsys (no additional 'Drag components here'), which might be fine though.

Build failure with AEM 6.2 and maven 3.5

Hi,
I clone project from GitHub. So I build the project with command
cd aem-react
mvn clean install -PautoInstallPackage

The build is failure.
[ERROR] Failed to execute goal org.apache.maven.plugins:maven-gpg-plugin:1.5:sign (sign-artifacts) on project aem-react: Exit code: 1 -> [Help 1]
[ERROR]
[ERROR] To see the full stack trace of the errors, re-run Maven with the -e switch.
[ERROR] Re-run Maven using the -X switch to enable full debug logging.
[ERROR]
[ERROR] For more information about the errors and possible solutions, please read the following articles:
[ERROR] [Help 1] http://cwiki.apache.org/confluence/display/MAVEN/MojoExecutionException

How to fix it?
Thank & regards,
BienHV

Issue running: incorrect reference to client.js

Hi there,

Found an issue when the project is built, it looks like the the page.html:

https://github.com/sinnerschrader/aem-react/blob/master/demo/src/main/content/jcr_root/apps/react-demo/pages/page/page.html#L17

Is referencing an old version of the main JS file react.demo where the correct file is client:

<meta data-sly-call="${clientlibInclude.js @ categories='client'}" data-sly-unwrap />

Failed to load resource

Hello,

I have successfully installed aem-react with the archetype by following the docs.
Now when I go to /content/${siteName}/en.html I am met by a blank page.
Opening the console yields:

[..]
http://localhost:4502/content/reactdemo/overview/jcr:content/par/accordion.html?forceeditcontext=true&_=1494573393245 404 (Not Found)
[..]

What am I missing here?

sinnerschrader / aem-react Goto Github PK

aem-react's Introduction

Adobe Experience Manager ("AEM") components written in React

STATUS

Documentation

Deploy / install the demo

Nashorn engine erro: "No such function renderReactComponent"

Background

License

Contribution

OSGI core bundle

Demo content package

Javascript library

Dependencies

aem-react's People

Contributors

Stargazers

Watchers

Forkers

aem-react's Issues

Recommend Projects

Recommend Topics

Recommend Org