AEM - react web components

AEM-react-wc is a library used to create web components from react components. Warning: This is an alpha build. Not yet for use in production

version: 1.0.0-alpha

Requirements

npm initialized at the root of your AEM project

npm init

Installation

Install into AEM project

$ npm i "git+ssh://[email protected]:7999/aem/aem-react-wc.git" --save

Usage

in JS:

import {createCustomElement} from 'aem-react-wc';

const MyReactComponent = (props) => <div>Hello {props.myName}<div/>;

customElements.define('my-react-component', createCustomElement(MyReactComponent));

in HTML:

<my-react-component my-name="Russell"></my-react-component>

Development

After installing, if you wish to contribute in development follow these steps:

• Clone repo

$ git clone ssh://[email protected]:7999/aem/aem-react-wc.git
$ cd aem-react-wc

• Npm link to global node_modules

$ npm link aem-react-wc

• cd into your AEM project. and link to the global node_modules aem-react-wc you just created:

$ npm link aem-react-wc

Now the aem-react-wc package in your local ./node_modules folder is symlinked to the repo you cloned. Any changes made on the repo will be reflected on the start and build script executions.

Enhancements

• Pre-render to achieve static files with content. No more flash of unstructured content on page load
• Get common js bundle to work with React hooks
• Ensure seo

TODO

• ERROR Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry when doing 'aem react build'