feature(react): add react directory to make the react-framework-delegate a first-class citizen and to make it easier to keep APIs in sync

packages/react/src/declarations.d.ts

@@ -0,0 +1,2 @@
+declare module 'react';
+declare module 'react-dom';

packages/react/src/index.ts

@@ -0,0 +1,2 @@
+export { Delegate } from './react-framework-delegate';
+export * from './utils/wc-shim';

packages/react/src/react-framework-delegate.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { FrameworkDelegate } from '@ionic/core';
+
+export function attachViewToDom(parentElement: HTMLElement, reactComponent: any, propsOrData: any, classesToAdd: string[]) {
+  const wrappingDiv = document.createElement('div');
+  if (classesToAdd) {
+    for (const clazz of classesToAdd) {
+      wrappingDiv.classList.add(clazz);
+    }
+  }
+
+  parentElement.appendChild(wrappingDiv);
+
+  // mount the React component
+  const reactElement = React.createElement(reactComponent, propsOrData);
+  const mountedComponentInstance = ReactDOM.render(reactElement, wrappingDiv);
+
+  return Promise.resolve({
+    element: wrappingDiv,
+    reactElement: reactElement,
+    instance: mountedComponentInstance
+  });
+
+}
+
+export function removeViewFromDom(parentElement: HTMLElement, childElement: HTMLElement): Promise<any> {
+  ReactDOM.unmountComponentAtNode(childElement);
+  parentElement.removeChild(childElement);
+  return Promise.resolve();
+}
+
+const Delegate: FrameworkDelegate = {
+  attachViewToDom: attachViewToDom,
+  removeViewFromDom: removeViewFromDom,
+};
+
+export { Delegate }

packages/react/src/utils/wc-shim.ts

@@ -0,0 +1,24 @@
+export function wc(events = {}, obj = {}) {
+  let storedEl: HTMLElement;
+
+  return function (el: HTMLElement) {
+
+    (Object as any).entries(events).forEach((keyValues: string[]) => {
+      const name = keyValues[0];
+      const value = keyValues[1];
+      const action = (el) ? el.addEventListener : storedEl.removeEventListener;
+      if (typeof value === 'function') {
+        action(name, value);
+        return;
+      }
+    });
+    if (el) {
+      (Object as any).entries(obj).forEach((keyValues: string[]) => {
+        const name = keyValues[0];
+        const value = keyValues[1];
+        (el as any)[name] = value;
+      });
+    }
+    storedEl = el;
+  };
+}