ngreact implementation wip

endpoints/common.py

@@ -162,6 +162,15 @@ def render_page_template(name, route_data=None, **kwargs):
     library_scripts = []
     main_scripts = ['dist/quay-frontend.min.js']
 
+  # TODO(Ian): Ordering of library script matters?
+  library_scripts.remove('lib/ngReact.min.js')
+  library_scripts.remove('lib/react.js')
+  library_scripts.remove('lib/react-dom.js')
+
+  library_scripts.append('lib/react.js')
+  library_scripts.append('lib/react-dom.js')
+  library_scripts.append('lib/ngReact.min.js')
+
   use_cdn = app.config.get('USE_CDN', True)
   if request.args.get('use_cdn') is not None:
     use_cdn = request.args.get('use_cdn') == 'true'

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/pages/repo-view.js

@@ -2,15 +2,38 @@
   /**
    * Repository view page.
    */
-  angular.module('quayPages').config(['pages', function(pages) {
-    pages.create('repo-view', 'repo-view.html', RepoViewCtrl, {
-      'newLayout': true,
-      'title': '{{ namespace }}/{{ name }}',
-      'description': 'Repository {{ namespace }}/{{ name }}'
+
+  var testComponent = React.createClass({
+    propTypes: {
+      prop1: React.PropTypes.string.isRequired,
+      prop2: React.PropTypes.string.isRequired
+    },
+    render: function() {
+      return React.DOM.span( null,
+        'This is a react component: ' + this.props.prop1 + ' ' + this.props.prop2
+      );
+    }
+  });
+
+  angular.module('quayPages')
+    .config(['pages', function(pages) {
+      pages.create('repo-view', 'repo-view.html', RepoViewCtrl, {
+        'newLayout': true,
+        'title': '{{ namespace }}/{{ name }}',
+        'description': 'Repository {{ namespace }}/{{ name }}'
+      });
+    }])
+    .value('TestComponent', testComponent)
+    .directive('testComponent', function(reactDirective) {
+      return reactDirective(testComponent);
     });
-  }]);
 
   function RepoViewCtrl($scope, $routeParams, $location, $timeout, ApiService, UserService, AngularPollChannel, ImageLoaderService, CookieService) {
+    $scope.reactProps = {
+      prop1: 'Prop 1',
+      prop2: 'Prop 2'
+    };
+
     $scope.namespace = $routeParams.namespace;
     $scope.name = $routeParams.name;
 
@@ -155,4 +178,4 @@
       loadImages(callback);
     };
   }
-})();
+})();

static/lib/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/lib/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/partials/repo-view.html

@@ -4,6 +4,8 @@
   <div class="page-content">
     <!-- New Public Repo Page experiment -->
     <div ng-if="newRepoExperiment">
+      <!-- Test React Component -->
+      <div><react-component name="TestComponent" props="reactProps"/></div>
     </div>
     <!-- Old Repo Page -->
     <div ng-if="!newRepoExperiment">