tech: initial react poc

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"
   }
 }

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'];

public/app/core/components/CoolButton.tsx

+
+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'}]
+  ]);
+});

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

public/app/features/plugins/partials/ds_edit.html

 <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>

public/app/headers/common.d.ts

-/// <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;

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',

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'
     }

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": [