tech: initial react poc

8 years ago · 84b1519480
parent 4326790bb4
commit 84b1519480
10 changed files with 216 additions and 32 deletions
--- a/package.json
+++ b/package.json
@ -10,6 +10,8 @@
    "url": "http://github.com/grafana/grafana.git"
  },
  "devDependencies": {
+    "@types/react": "^16.0.5",
+    "@types/react-dom": "^15.5.4",
    "autoprefixer": "^6.4.0",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.35.1",
@ -48,7 +50,7 @@
    "mocha": "3.2.0",
    "phantomjs-prebuilt": "^2.1.14",
    "reflect-metadata": "0.1.8",
-    "rxjs": "^5.0.0-rc.5",
+    "rxjs": "^5.4.3",
    "sass-lint": "^1.10.2",
    "systemjs": "0.19.41",
    "zone.js": "^0.7.2"
@ -70,13 +72,16 @@
    "karma-sinon": "^1.0.5",
    "lodash": "^4.17.4",
    "mousetrap": "^1.6.0",
+    "ngreact": "^0.4.1",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
    "remarkable": "^1.7.1",
    "sinon": "1.17.6",
    "systemjs-builder": "^0.15.34",
    "tether": "^1.4.0",
    "tether-drop": "https://github.com/torkelo/drop",
-    "tslint": "^5.1.0",
-    "typescript": "^2.2.2",
+    "tslint": "^5.7.0",
+    "typescript": "^2.5.2",
    "virtual-scroll": "^1.1.1"
  }
 }
--- a/public/app/app.ts
+++ b/public/app/app.ts
@ -9,6 +9,7 @@ import 'angular-sanitize';
 import 'angular-dragdrop';
 import 'angular-bindonce';
 import 'angular-ui';
+import 'ngreact';

 import $ from 'jquery';
 import angular from 'angular';
@ -84,6 +85,7 @@ export class GrafanaApp {
      'pasvaz.bindonce',
      'ui.bootstrap',
      'ui.bootstrap.tpls',
+      'react'
    ];

    var module_types = ['controllers', 'directives', 'factories', 'services', 'filters', 'routes'];
--- a/public/app/core/components/CoolButton.tsx
+++ b/public/app/core/components/CoolButton.tsx
@ -0,0 +1,67 @@
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import coreModule from '../core_module';
+
+export interface ICoolButtonProps {
+  count: number;
+}
+
+export interface ICoolButtonState {
+  count: number;
+}
+
+
+export class CoolButton extends React.Component<ICoolButtonProps, ICoolButtonState> {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {count: 1};
+  }
+
+  onClick() {
+    this.setState(prevState => ({
+      count: prevState.count + 1
+    }));
+    console.log(this.state.count);
+  }
+
+  render() {
+    return (
+      <div>
+        <h2 onClick={this.onClick.bind(this)}>Hello</h2>
+        <div>{this.state.count}</div>
+        <a href="/alerting">Go to alerting</a>
+      </div>
+    );
+  }
+}
+
+export interface Props {
+  fname: string;
+  onClick: () => void;
+}
+
+function SecondButton({fname, onClick}: Props) {
+  return (
+    <div className="hello">
+      <div className="greeting">
+        Hello {fname}
+      </div>
+      <div>
+        <button onClick={onClick}>button</button>
+      </div>
+    </div>
+  );
+}
+
+coreModule.directive('coolButton', function(reactDirective) {
+  return reactDirective(CoolButton);
+});
+
+coreModule.directive('secondButton', function(reactDirective) {
+  return reactDirective(SecondButton, [
+    ['fname', {watchDepth: 'value'}]
+  ]);
+});
--- a/public/app/core/core.ts
+++ b/public/app/core/core.ts
@ -51,6 +51,7 @@ import {helpModal} from './components/help/help';
 import {collapseBox} from './components/collapse_box';
 import {JsonExplorer} from './components/json_explorer/json_explorer';
 import {NavModelSrv, NavModel} from './nav_model_srv';
+import {CoolButton} from './components/CoolButton';


 export {
@ -80,4 +81,5 @@ export {
  JsonExplorer,
  NavModelSrv,
  NavModel,
+  CoolButton,
 };
--- a/public/app/features/plugins/partials/ds_edit.html
+++ b/public/app/features/plugins/partials/ds_edit.html
@ -1,6 +1,10 @@
 <navbar model="ctrl.navModel"></navbar>

 <div class="page-container">
+	<cool-button>
+	</cool-button>
+
+	<second-button fname="ctrl.current.name"></second-button>

  <div class="page-header">
 		<h1 ng-show="ctrl.isNew">Add data source</h1>
--- a/public/app/headers/common.d.ts
+++ b/public/app/headers/common.d.ts
@ -1,4 +1,3 @@
-/// <reference path="./es6-shim/es6-shim.d.ts" />

 declare var System: any;

@ -53,11 +52,6 @@ declare module 'eventemitter3' {
  export default config;
 }

-declare module 'virtual-scroll' {
-  var config: any;
-  export default config;
-}
-
 declare module 'mousetrap' {
  var config: any;
  export default config;
--- a/public/app/system.conf.js
+++ b/public/app/system.conf.js
@ -2,7 +2,9 @@ System.config({
  defaultJSExtenions: true,
  baseURL: 'public',
  paths: {
-    'virtual-scroll': 'vendor/npm/virtual-scroll/src/index.js',
+    'react': 'vendor/npm/react/dist/react.js',
+    'react-dom': 'vendor/npm/react-dom/dist/react-dom.js',
+    'ngreact': 'vendor/npm/ngreact/ngReact.js',
    'mousetrap': 'vendor/npm/mousetrap/mousetrap.js',
    'remarkable': 'vendor/npm/remarkable/dist/remarkable.js',
    'tether': 'vendor/npm/tether/dist/js/tether.js',
--- a/tasks/options/copy.js
+++ b/tasks/options/copy.js
@ -38,6 +38,9 @@ module.exports = function(config) {
        'remarkable/dist/*',
        'virtual-scroll/**/*',
        'mousetrap/**/*',
+        'react/dist/*.js',
+        'react-dom/dist/*.js',
+        'ngreact/ngReact.js',
      ],
      dest: '<%= srcDir %>/vendor/npm'
    }
--- a/tsconfig.json
+++ b/tsconfig.json
@ -5,19 +5,22 @@
        "outDir": "public_gen",
        "noImplicitAny": false,
        "target": "es5",
+        "lib": ["es6", "dom"],
        "rootDir": "public/",
        "module": "system",
+        "jsx": "react",
        "noEmitOnError": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "noImplicitReturns":false,
-        "noImplicitThis":false,
+        "noImplicitThis": false,
        "noImplicitUseStrict":false,
        "noUnusedLocals":false,
        "moduleResolution": "classic"
    },
    "include": [
        "public/app/**/*.ts",
+        "public/app/**/*.tsx",
        "public/test/**/*.ts"
    ],
    "exclude": [
--- a/yarn.lock
+++ b/yarn.lock
@ -2,6 +2,16 @@
 # yarn lockfile v1


+"@types/react-dom@^15.5.4":
+  version "15.5.4"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-15.5.4.tgz#3f75ba86a2ce9a7d1d9e7d1ee3f186f3a9652d8f"
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*", "@types/react@^16.0.5":
+  version "16.0.5"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.0.5.tgz#d713cf67cc211dea20463d2a0b66005c22070c4b"
+
 "JSV@>= 4.0.x":
  version "4.0.2"
  resolved "https://registry.yarnpkg.com/JSV/-/JSV-4.0.2.tgz#d077f6825571f82132f9dffaed587b4029feff57"
@ -196,6 +206,10 @@ arrify@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"

+asap@~2.0.3:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
+
 asn1@~0.2.3:
  version "0.2.3"
  resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.3.tgz#dac8787713c9966849fc8180777ebe9c1ddf3b86"
@ -767,16 +781,12 @@ commander@2.8.x:
  dependencies:
    graceful-readlink ">= 1.0.0"

-commander@2.9.0, commander@2.9.x, commander@~2.9.0:
+commander@2.9.0, commander@2.9.x, commander@^2.8.1, commander@^2.9.0, commander@~2.9.0:
  version "2.9.0"
  resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
  dependencies:
    graceful-readlink ">= 1.0.0"

-commander@^2.8.1, commander@^2.9.0:
-  version "2.11.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"
-
 comment-parser@^0.3.1:
  version "0.3.2"
  resolved "https://registry.yarnpkg.com/comment-parser/-/comment-parser-0.3.2.tgz#3c03f0776b86a36dfd9a0a2c97c6307f332082fe"
@ -858,6 +868,10 @@ convert-source-map@~1.1.2:
  version "1.1.3"
  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.1.3.tgz#4829c877e9fe49b3161f3bf3673888e204699860"

+core-js@^1.0.0:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
+
 core-js@^2.2.0, core-js@^2.4.0:
  version "2.5.0"
  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.0.tgz#569c050918be6486b3837552028ae0466b717086"
@ -877,6 +891,14 @@ crc@^3.4.4:
  version "3.4.4"
  resolved "https://registry.yarnpkg.com/crc/-/crc-3.4.4.tgz#9da1e980e3bd44fc5c93bf5ab3da3378d85e466b"

+create-react-class@^15.6.0:
+  version "15.6.0"
+  resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.0.tgz#ab448497c26566e1e29413e883207d57cfe7bed4"
+  dependencies:
+    fbjs "^0.8.9"
+    loose-envify "^1.3.1"
+    object-assign "^4.1.1"
+
 cross-spawn@^3.0.0:
  version "3.0.1"
  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-3.0.1.tgz#1256037ecb9f0c5f79e3d6ef135e30770184b982"
@ -1106,6 +1128,12 @@ encodeurl@~1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.1.tgz#79e3d58655346909fe6f0f45a5de68103b294d20"

+encoding@^0.1.11:
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
+  dependencies:
+    iconv-lite "~0.4.13"
+
 end-of-stream@^1.0.0:
  version "1.4.0"
  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.0.tgz#7a90d833efda6cfa6eac0f4949dbb0fad3a63206"
@ -1449,6 +1477,18 @@ faye-websocket@~0.10.0:
  dependencies:
    websocket-driver ">=0.5.1"

+fbjs@^0.8.9:
+  version "0.8.15"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.15.tgz#4f0695fdfcc16c37c0b07facec8cb4c4091685b9"
+  dependencies:
+    core-js "^1.0.0"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.9"
+
 fd-slicer@~1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.0.1.tgz#8b5bcbd9ec327c5041bf9ab023fd6750f1177e65"
@ -2202,7 +2242,7 @@ iconv-lite@0.4.13:
  version "0.4.13"
  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.13.tgz#1f88aba4ab0b1508e8312acc39345f36e992e2f2"

-iconv-lite@0.4.15:
+iconv-lite@0.4.15, iconv-lite@~0.4.13:
  version "0.4.15"
  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.15.tgz#fe265a218ac6a57cfe854927e9d04c19825eddeb"

@ -2463,6 +2503,13 @@ isobject@^2.0.0:
  dependencies:
    isarray "1.0.0"

+isomorphic-fetch@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
+  dependencies:
+    node-fetch "^1.0.1"
+    whatwg-fetch ">=0.10.0"
+
 isstream@0.1.x, isstream@~0.1.2:
  version "0.1.2"
  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
@ -2911,7 +2958,7 @@ longest@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"

-loose-envify@^1.0.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
  version "1.3.1"
  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
  dependencies:
@ -3159,12 +3206,23 @@ ng-annotate@^1.2.1:
    stringset "~0.2.1"
    tryor "~0.1.2"

+ngreact@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/ngreact/-/ngreact-0.4.1.tgz#53d8f0db7c687c6daa340827a5ef04a903c14701"
+
 no-case@^2.2.0:
  version "2.3.1"
  resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.1.tgz#7aeba1c73a52184265554b7dc03baf720df80081"
  dependencies:
    lower-case "^1.1.1"

+node-fetch@^1.0.1:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
+  dependencies:
+    encoding "^0.1.11"
+    is-stream "^1.0.1"
+
 node-gyp@^3.3.1:
  version "3.6.2"
  resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-3.6.2.tgz#9bfbe54562286284838e750eac05295853fa1c60"
@ -3290,7 +3348,7 @@ oauth-sign@~0.8.1:
  version "0.8.2"
  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"

-object-assign@^4.0.1, object-assign@^4.1.0:
+object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
  version "4.1.1"
  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"

@ -3578,6 +3636,12 @@ progress@^1.1.8, progress@~1.1.8:
  version "1.1.8"
  resolved "https://registry.yarnpkg.com/progress/-/progress-1.1.8.tgz#e260c78f6161cdd9b0e56cc3e0a85de17c7a57be"

+promise@^7.1.1:
+  version "7.3.1"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
+  dependencies:
+    asap "~2.0.3"
+
 promised-io@0.3.5:
  version "0.3.5"
  resolved "https://registry.yarnpkg.com/promised-io/-/promised-io-0.3.5.tgz#4ad217bb3658bcaae9946b17a8668ecd851e1356"
@ -3592,6 +3656,13 @@ prompt@~0.2.14:
    utile "0.2.x"
    winston "0.8.x"

+prop-types@^15.5.10:
+  version "15.5.10"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
+  dependencies:
+    fbjs "^0.8.9"
+    loose-envify "^1.3.1"
+
 pseudomap@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
@ -3656,6 +3727,25 @@ rc@^1.1.7:
    minimist "^1.2.0"
    strip-json-comments "~2.0.1"

+react-dom@^15.6.1:
+  version "15.6.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.6.1.tgz#2cb0ed4191038e53c209eb3a79a23e2a4cf99470"
+  dependencies:
+    fbjs "^0.8.9"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.0"
+    prop-types "^15.5.10"
+
+react@^15.6.1:
+  version "15.6.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-15.6.1.tgz#baa8434ec6780bde997cdc380b79cd33b96393df"
+  dependencies:
+    create-react-class "^15.6.0"
+    fbjs "^0.8.9"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.0"
+    prop-types "^15.5.10"
+
 read-pkg-up@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
@ -3942,9 +4032,9 @@ rx-lite@^3.1.2:
  version "3.1.2"
  resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-3.1.2.tgz#19ce502ca572665f3b647b10939f97fd1615f102"

-rxjs@^5.0.0-rc.5:
-  version "5.4.2"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.4.2.tgz#2a3236fcbf03df57bae06fd6972fd99e5c08fcf7"
+rxjs@^5.4.3:
+  version "5.4.3"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.4.3.tgz#0758cddee6033d68e0fd53676f0f3596ce3d483f"
  dependencies:
    symbol-observable "^1.0.1"

@ -4017,6 +4107,10 @@ set-immediate-shim@^1.0.0, set-immediate-shim@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"

+setimmediate@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
+
 setprototypeof@1.0.3:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.0.3.tgz#66567e37043eeb4f04d91bd658c0cbefb55b8e04"
@ -4501,9 +4595,9 @@ tslib@^1.7.1:
  version "1.7.1"
  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.7.1.tgz#bc8004164691923a79fe8378bbeb3da2017538ec"

-tslint@^5.1.0:
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/tslint/-/tslint-5.5.0.tgz#10e8dab3e3061fa61e9442e8cee3982acf20a6aa"
+tslint@^5.7.0:
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/tslint/-/tslint-5.7.0.tgz#c25e0d0c92fa1201c2bc30e844e08e682b4f3552"
  dependencies:
    babel-code-frame "^6.22.0"
    colors "^1.1.2"
@ -4514,11 +4608,11 @@ tslint@^5.1.0:
    resolve "^1.3.2"
    semver "^5.3.0"
    tslib "^1.7.1"
-    tsutils "^2.5.1"
+    tsutils "^2.8.1"

-tsutils@^2.5.1:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-2.8.0.tgz#0160173729b3bf138628dd14a1537e00851d814a"
+tsutils@^2.8.1:
+  version "2.8.2"
+  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-2.8.2.tgz#2c1486ba431260845b0ac6f902afd9d708a8ea6a"
  dependencies:
    tslib "^1.7.1"

@ -4553,9 +4647,13 @@ typedarray@~0.0.5:
  version "0.0.6"
  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"

-typescript@^2.2.2:
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.4.2.tgz#f8395f85d459276067c988aa41837a8f82870844"
+typescript@^2.5.2:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.5.2.tgz#038a95f7d9bbb420b1bf35ba31d4c5c1dd3ffe34"
+
+ua-parser-js@^0.7.9:
+  version "0.7.14"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.14.tgz#110d53fa4c3f326c121292bbeac904d2e03387ca"

 uglify-js@2.6.x:
  version "2.6.4"
@ -4736,6 +4834,10 @@ websocket-extensions@>=0.1.1:
  version "0.1.1"
  resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.1.tgz#76899499c184b6ef754377c2dbb0cd6cb55d29e7"

+whatwg-fetch@>=0.10.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84"
+
 when@^3.7.5:
  version "3.7.8"
  resolved "https://registry.yarnpkg.com/when/-/when-3.7.8.tgz#c7130b6a7ea04693e842cdc9e7a1f2aa39a39f82"