chore(packages): move the packages to root

react/README.md

@@ -0,0 +1,13 @@
+
+## React
+
+These are React specific building blocks on top of `@ionic/core` components/services.
+
+## To Build
+
+1. run `npm run build` to build a distro to `dist`
+
+## Publishing
+
+1. Run `npm run deploy`
+2. Commit and push any outstanding changes

react/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@ionic/react",
+  "version": "0.0.2-3",
+  "description": "React specific wrapper for @ionic/core",
+  "keywords": [
+    "ionic",
+    "framework",
+    "mobile",
+    "app",
+    "hybrid",
+    "webapp",
+    "cordova",
+    "progressive web app",
+    "pwa"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ionic-team/ionic.git"
+  },
+  "scripts": {
+    "build": "npm run clean && npm run compile",
+    "clean": "rm -rf dist",
+    "compile": "npm run tsc",
+    "deploy": "np --any-branch",
+    "tsc": "tsc -p ."
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/"
+  ],
+  "devDependencies": {
+    "@ionic/core": "next",
+    "react": "latest",
+    "react-dom": "latest",
+    "typescript": "~2.5.2"
+  },
+  "dependencies": {
+    "@stencil/core": "next"
+  }
+}

react/src/apis/apis.ts

@@ -0,0 +1,22 @@
+
+import { ModalOptions } from '@ionic/core';
+
+import { Delegate } from '../react-framework-delegate';
+import { getOrAppendElement } from '../utils/helpers';
+
+export function createModal(opts: ModalOptions): Promise<HTMLIonModalElement> {
+  return createOverlayInternal('ion-modal-controller', opts);
+}
+
+export function createPopover(opts: ModalOptions): Promise<HTMLIonModalElement> {
+  return createOverlayInternal('ion-popover-controller', opts);
+}
+
+
+function createOverlayInternal(controllerTagName: string, opts: any) {
+  opts.delegate = Delegate;
+  const element = getOrAppendElement(controllerTagName) as HTMLIonModalControllerElement;
+  return (element as any).componentOnReady().then(() => {
+    return element.create(opts);
+  });
+}

react/src/declarations.d.ts

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

react/src/index.ts

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

react/src/react-framework-delegate.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { FrameworkDelegate } from '@ionic/core';
+import { isElementModal, isElementNav } from './utils/helpers';
+
+export function attachViewToDom(parentElement: HTMLElement, reactComponent: any, propsOrData: any, classesToAdd: string[]) {
+  const wrappingDiv = shouldWrapInIonPage(parentElement) ? document.createElement('ion-page') : 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 }
+
+
+export function shouldWrapInIonPage(element: HTMLElement) {
+  return isElementModal(element) || isElementNav(element);
+}

react/src/utils/helpers.ts

@@ -0,0 +1,18 @@
+
+export function getOrAppendElement(tagName: string): Element {
+  const element = document.querySelector(tagName);
+  if (element) {
+    return element;
+  }
+  const tmp = document.createElement(tagName);
+  document.body.appendChild(tmp);
+  return tmp;
+}
+
+export function isElementNav(element: HTMLElement) {
+  return element.tagName.toUpperCase() === 'ION-NAV';
+}
+
+export function isElementModal(element: HTMLElement) {
+  return element.classList.contains('modal-wrapper');
+}

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;
+  };
+}

react/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "allowUnreachableCode": false,
+    "allowSyntheticDefaultImports": true,
+    "declaration": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": ["dom", "es2015"],
+    "module": "es2015",
+    "moduleResolution": "node",
+    "noImplicitAny": true,
+    "noImplicitReturns": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "outDir": "dist",
+    "removeComments": false,
+    "sourceMap": true,
+    "target": "es2015"
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "compileOnSave": false,
+  "buildOnSave": false
+}

react/tslint.json

@@ -0,0 +1,3 @@
+{
+  "extends": "tslint-ionic-rules"
+}