Merge pull request #1985 from iminoso/ngreact

ngReact implementation

static/js/app.js

@@ -37,7 +37,7 @@ quayPages.constant('pages', {
 
 quayDependencies = ['ngRoute', 'chieffancypants.loadingBar', 'cfp.hotkeys', 'angular-tour', 'restangular', 'angularMoment',
                     'mgcrea.ngStrap', 'ngCookies', 'ngSanitize', 'angular-md5', 'pasvaz.bindonce', 'ansiToHtml',
-                    'core-ui', 'core-config-setup', 'quayPages', 'infinite-scroll'];
+                    'core-ui', 'core-config-setup', 'quayPages', 'infinite-scroll', 'react'];
 
 if (window.__config && (window.__config.MIXPANEL_KEY || window.__config.MUNCHKIN_KEY || window.__config.GOOGLE_ANALYTICS_KEY)) {
   quayDependencies.push('angulartics');

static/js/directives/components/testComponent.js

@@ -0,0 +1,20 @@
+/**
+ * A react component implemented using the ngReact library
+ */
+var testComponent = React.createClass({
+  propTypes: {
+    firstProp: React.PropTypes.string.isRequired,
+    secondProp: React.PropTypes.string.isRequired
+  },
+  render: function() {
+    return React.DOM.span(null, 
+      'This is a react component: ' + this.props.firstProp + ' ' + this.props.secondProp
+    );
+  }
+});
+
+angular.module('quayPages').value('test-component', testComponent);
+angular.module('quayPages').directive('testComponent', function(reactDirective) {
+    return reactDirective('testComponent');
+});
+

static/js/pages/repo-view.js

@@ -11,6 +11,11 @@
   }]);
 
   function RepoViewCtrl($scope, $routeParams, $location, $timeout, ApiService, UserService, AngularPollChannel, ImageLoaderService, CookieService) {
+    $scope.reactProps = {
+      firstProp: 'Prop 1',
+      secondProp: 'Prop 2'
+    };
+
     $scope.namespace = $routeParams.namespace;
     $scope.name = $routeParams.name;
 
@@ -155,4 +160,4 @@
       loadImages(callback);
     };
   }
-})();
+})();

static/lib/ngReact/react.dom.js

@@ -0,0 +1,42 @@
+/**
+ * ReactDOM v15.3.2
+ *
+ * Copyright 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ */
+// Based off https://github.com/ForbesLindesay/umd/blob/master/template.js
+;(function(f) {
+  // CommonJS
+  if (typeof exports === "object" && typeof module !== "undefined") {
+    module.exports = f(require('react'));
+
+  // RequireJS
+  } else if (typeof define === "function" && define.amd) {
+    define(['react'], f);
+
+  // <script>
+  } else {
+    var g;
+    if (typeof window !== "undefined") {
+      g = window;
+    } else if (typeof global !== "undefined") {
+      g = global;
+    } else if (typeof self !== "undefined") {
+      g = self;
+    } else {
+      // works providing we're not in "use strict";
+      // needed for Java 8 Nashorn
+      // see https://github.com/facebook/react/issues/3037
+      g = this;
+    }
+    g.ReactDOM = f(g.React);
+  }
+
+})(function(React) {
+  return React.__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+});

static/lib/ngReact/react.ngReact.min.js

@@ -0,0 +1 @@
+!function(a,b){"undefined"!=typeof module&&module.exports?module.exports=b(require("react"),require("react-dom"),require("angular")):"function"==typeof define&&define.amd?define(["react","react-dom","angular"],function(c,d,angular){return a.ngReact=b(c,d,angular)}):a.ngReact=b(a.React,a.ReactDOM,a.angular)}(this,function(React,a,angular){"use strict";function b(a,b){if(angular.isFunction(a))return a;if(!a)throw new Error("ReactComponent name attribute must be specified");var c;try{c=b.get(a)}catch(d){}if(!c)try{c=a.split(".").reduce(function(a,b){return a[b]},window)}catch(d){}if(!c)throw Error("Cannot find react component "+a);return c}function c(a,b){if(a.wrappedInApply)return a;var c=function(){var c=arguments,d=b.$root.$$phase;return"$apply"===d||"$digest"===d?a.apply(null,c):b.$apply(function(){return a.apply(null,c)})};return c.wrappedInApply=!0,c}function d(a,b){return Object.keys(a||{}).reduce(function(d,e){var f=a[e];return d[e]=angular.isFunction(f)?c(f,b):f,d},{})}function e(a,b,c,d){"collection"===a&&angular.isFunction(b.$watchCollection)?c.forEach(function(a){b.$watchCollection(a,d)}):"reference"===a?angular.isFunction(b.$watchGroup)?b.$watchGroup(c,d):c.forEach(function(a){b.$watch(a,d)}):c.forEach(function(a){b.$watch(a,d,!0)})}function f(b,c,d,e){d.$evalAsync(function(){a.render(React.createElement(b,c),e[0])})}var g=function(c){return{restrict:"E",replace:!0,link:function(g,h,i){var j=b(i.name,c),k=function(){var a=g.$eval(i.props),b=d(a,g);f(j,b,g,h)};i.props?e(i.watchDepth,g,[i.props],k):k(),g.$on("$destroy",function(){i.onScopeDestroy?g.$eval(i.onScopeDestroy,{unmountComponent:a.unmountComponentAtNode.bind(this,h[0])}):a.unmountComponentAtNode(h[0])})}}},h=function(c){return function(g,h,i,j){var k={restrict:"E",replace:!0,link:function(i,k,l){var m=b(g,c);h=h||Object.keys(m.propTypes||{});var n=function(){var a={};h.forEach(function(b){a[b]=i.$eval(l[b])}),a=d(a,i),a=angular.extend({},a,j),f(m,a,i,k)},o=h.map(function(a){return l[a]});e(l.watchDepth,i,o,n),n(),i.$on("$destroy",function(){l.onScopeDestroy?i.$eval(l.onScopeDestroy,{unmountComponent:a.unmountComponentAtNode.bind(this,k[0])}):a.unmountComponentAtNode(k[0])})}};return angular.extend(k,i)}};return angular.module("react",[]).directive("reactComponent",["$injector",g]).factory("reactDirective",["$injector",h])});

static/partials/repo-view.html

@@ -3,7 +3,18 @@
      error-message="'Repository not found'">
   <div class="page-content">
     <!-- New Public Repo Page experiment -->
-    <div ng-if="newRepoExperiment">
+    <div ng-if="newRepoExperiment" class="main-panel">
+      <!-- Test React Component -->
+      <div>
+        <div>
+          <div>This is using the generic react-component directive</div>
+          <react-component name="test-component" props="reactProps"/>
+        </div>
+        <div>
+          <div>This is creating a specific directive corresponding to a react component</div>
+          <test-component first-prop="reactProps.firstProp" second-prop="reactProps.secondProp"/>
+        </div>
+      </div>
     </div>
     <!-- Old Repo Page -->
     <div ng-if="!newRepoExperiment">