From 6d375e33bf3272100fa2f47e2814656dbe1c50bf Mon Sep 17 00:00:00 2001 From: Ian Minoso Date: Mon, 10 Oct 2016 18:48:45 -0400 Subject: [PATCH] ngreact implementation wip --- endpoints/common.py | 9 + static/js/app.js | 2 +- static/js/pages/repo-view.js | 37 +- static/lib/ngReact.min.js | 1 + static/lib/react-dom.js | 42 + static/lib/react.js | 20595 +++++++++++++++++++++++++++++++ static/partials/repo-view.html | 2 + 7 files changed, 20680 insertions(+), 8 deletions(-) create mode 100644 static/lib/ngReact.min.js create mode 100644 static/lib/react-dom.js create mode 100644 static/lib/react.js diff --git a/endpoints/common.py b/endpoints/common.py index 791f987f8..3347be02d 100644 --- a/endpoints/common.py +++ b/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' diff --git a/static/js/app.js b/static/js/app.js index 4f0e0c836..7caced473 100644 --- a/static/js/app.js +++ b/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'); diff --git a/static/js/pages/repo-view.js b/static/js/pages/repo-view.js index 1353f5b85..27461f53b 100644 --- a/static/js/pages/repo-view.js +++ b/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); }; } -})(); \ No newline at end of file +})(); diff --git a/static/lib/ngReact.min.js b/static/lib/ngReact.min.js new file mode 100644 index 000000000..4930dce4f --- /dev/null +++ b/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])}); \ No newline at end of file diff --git a/static/lib/react-dom.js b/static/lib/react-dom.js new file mode 100644 index 000000000..9c8699b68 --- /dev/null +++ b/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); + + //