Merge pull request #12870 from miguelvazq/FixReactTSIssues

HPCC-22145 Add ReactJS to ECL Watch framework

Reviewed-By: Gordon Smith <gordon.smith@lexisnexis.com>
Reviewed-By: Richard Chapman <rchapman@hpccsystems.com>

esp/src/eclwatch/dojoConfig.js

@@ -56,7 +56,9 @@ function getConfig(env) {
             "codemirror": baseUrl + "/node_modules/codemirror",
             "crossfilter": baseUrl + "/node_modules/crossfilter2/crossfilter.min",
             "font-awesome": baseUrl + "/node_modules/@hpcc-js/common/font-awesome",
-            "tslib": baseUrl + "/node_modules/tslib/tslib"
+            "tslib": baseUrl + "/node_modules/tslib/tslib",
+            "react": baseUrl + "/node_modules/react/umd/react.production.min",
+            "react-dom": baseUrl + "/node_modules/react-dom/umd/react-dom.production.min"
         },
         packages: [
             {

esp/src/package-lock.json

@@ -335,6 +335,31 @@
         "@types/geojson": "*"
       }
     },
+    "@types/prop-types": {
+      "version": "15.7.1",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.1.tgz",
+      "integrity": "sha512-CFzn9idOEpHrgdw8JsoTkaDDyRWk1jrzIV8djzcgpq0y9tG4B4lFT+Nxh52DVpDXV+n4+NPNv7M1Dj5uMp6XFg==",
+      "dev": true
+    },
+    "@types/react": {
+      "version": "16.9.1",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.1.tgz",
+      "integrity": "sha512-jGM2x8F7m7/r+81N/BOaUKVwbC5Cdw6ExlWEUpr77XPwVeNvAppnPEnMMLMfxRDYL8FPEX8MHjwtD2NQMJ0yyQ==",
+      "dev": true,
+      "requires": {
+        "@types/prop-types": "*",
+        "csstype": "^2.2.0"
+      }
+    },
+    "@types/react-dom": {
+      "version": "16.8.5",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.8.5.tgz",
+      "integrity": "sha512-idCEjROZ2cqh29+trmTmZhsBAUNQuYrF92JHKzZ5+aiFM1mlSk3bb23CK7HhYuOY75Apgap5y2jTyHzaM2AJGA==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@webassemblyjs/ast": {
       "version": "1.8.5",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.8.5.tgz",
@@ -1832,6 +1857,12 @@
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
       "dev": true
     },
+    "csstype": {
+      "version": "2.6.6",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.6.tgz",
+      "integrity": "sha512-RpFbQGUE74iyPgvr46U9t1xoQBM8T4BL8SxrN66Le2xYAPSaDJJKeztV3awugusb3g3G9iL8StmkBBXhcbbXhg==",
+      "dev": true
+    },
     "cyclist": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-0.2.2.tgz",
@@ -4386,6 +4417,11 @@
         "isarray": "1.0.0"
       }
     },
+    "js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
     "jshint": {
       "version": "2.10.2",
       "resolved": "https://registry.npmjs.org/jshint/-/jshint-2.10.2.tgz",
@@ -4862,6 +4898,14 @@
       "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=",
       "dev": true
     },
+    "loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "requires": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      }
+    },
     "lru-cache": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.3.tgz",
@@ -5656,8 +5700,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-      "dev": true
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
     },
     "object-copy": {
       "version": "0.1.0",
@@ -6099,6 +6142,16 @@
       "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=",
       "dev": true
     },
+    "prop-types": {
+      "version": "15.7.2",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
+      "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.8.1"
+      }
+    },
     "proxy-addr": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.5.tgz",
@@ -6269,6 +6322,32 @@
       "integrity": "sha1-DD0L6u2KAclm2Xh793goElKpeao=",
       "dev": true
     },
+    "react": {
+      "version": "16.9.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.9.0.tgz",
+      "integrity": "sha512-+7LQnFBwkiw+BobzOF6N//BdoNw0ouwmSJTEm9cglOOmsg/TMiFHZLe2sEoN5M7LgJTj9oHH0gxklfnQe66S1w==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2"
+      }
+    },
+    "react-dom": {
+      "version": "16.9.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.9.0.tgz",
+      "integrity": "sha512-YFT2rxO9hM70ewk9jq0y6sQk8cL02xm4+IzYBz75CQGlClQQ1Bxq0nhHF6OtSbit+AIahujJgb/CPRibFkMNJQ==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2",
+        "scheduler": "^0.15.0"
+      }
+    },
+    "react-is": {
+      "version": "16.9.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.9.0.tgz",
+      "integrity": "sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw=="
+    },
     "read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -6546,6 +6625,15 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "scheduler": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.15.0.tgz",
+      "integrity": "sha512-xAefmSfN6jqAa7Kuq7LIJY0bwAPG3xlCj0HMEBQk1lxYiDKZscY2xJ5U/61ZTrYbmNQbXa+gc7czPkVo11tnCg==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    },
     "schema-utils": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",

esp/src/package.json

@@ -26,7 +26,8 @@
     "dev-start": "ws",
     "dev-link": "rimraf ./node_modules/@hpcc-js && mklink /J .\\node_modules\\@hpcc-js ..\\..\\..\\hpcc-js\\packages",
     "dev-unlink": "rimraf ./node_modules/@hpcc-js && npm install",
-    "test": "run-s lint"
+    "test": "run-s lint",
+    "postinstall": "rimraf ./node_modules/**/preact/dist/preact.d.ts"
   },
   "main": "src/stub.js",
   "dependencies": {
@@ -43,16 +44,20 @@
     "d3-array": "1.2.4",
     "d3-scale": "1.0.7",
     "d3-selection": "1.4.0",
+    "dijit": "1.15.0",
     "dojo": "1.15.0",
     "dojo-themes": "1.14.1",
     "dojo-util": "1.15.0",
-    "dijit": "1.15.0",
     "dojox": "1.15.0",
     "es6-promise": "4.2.6",
-    "font-awesome": "4.7.0"
+    "font-awesome": "4.7.0",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0"
   },
   "devDependencies": {
     "@types/dojo": "1.9.41",
+    "@types/react": "^16.9.1",
+    "@types/react-dom": "^16.8.5",
     "copy-webpack-plugin": "4.5.4",
     "cpx": "1.5.0",
     "css-loader": "2.1.1",

esp/src/src/Components/Example.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { render } from "react-dom";
+
+ interface IProps {
+  message: string;
+}
+
+ export class Hello extends React.Component<IProps, {}> {
+  render() {
+    return <span>Hello from ECLWatch {this.props.message}!</span>;
+  }
+}
+
+
+ export function renderHello(target: HTMLElement, props: IProps) {
+    render(<Hello message={props.message} />, target);
+}
+// funtcional component
+// const Hello2 = (props: IProps) => {
+//   return <span>Hello from {props.message}!</span>;
+// };
+
+//add to widgets as such
+//ExampleComponent.renderHello(document.getElementById(this.id + "React"), { message: "Some Message" });

esp/src/tsconfig.json

@@ -14,6 +14,7 @@
         "allowJs": true,
         "skipLibCheck": true,
         "noImplicitUseStrict": true,
+        "jsx": "react",
         "lib": [
             "dom",
             "es5",