Themes: SSR testing branch

client/boot/index.js

@@ -171,6 +171,8 @@ function boot() {
 	} else {
 		if ( config.isEnabled( 'oauth' ) ) {
 			LoggedOutLayout = require( 'layout/logged-out-oauth' );
+		} else if ( startsWith( window.location.pathname, '/design' ) ) {
+			LoggedOutLayout = require( 'layout/themes-logged-out' );
 		} else {
 			LoggedOutLayout = require( 'layout/logged-out' );
 		}

config/wpcalypso.json

@@ -43,6 +43,7 @@
 		"manage/themes": true,
 		"manage/themes-jetpack": true,
 		"premium-themes": true,
+		"manage/themes/logged-out": true,
 		"press-this": true,
 		"manage/sharing": true,
 		"manage/plans": true,

index.js

@@ -1,3 +1,5 @@
+require( 'lib/local-storage' )( global );
+
 /**
  * External dependencies.
  */

server/i18nlint/i18nlint.js

@@ -9,7 +9,7 @@ var fs = require( 'fs' ),
 	babel = require( 'babel-core' ),
 	preProcessXGettextJSMatch = require( '../i18n/preprocess-xgettextjs-match.js' ),
 	SourceMapConsumer = require( 'source-map' ).SourceMapConsumer,
-	tokenize = require( '../../client/lib/interpolate-components/tokenize.js' ),
+	tokenize = require( '../../shared/lib/interpolate-components/tokenize.js' ),
 	contains = require( 'lodash' ).contains,
 	flow = require( 'lodash' ).flow;
 

server/lib/viewport/index.js

@@ -0,0 +1,3 @@
+module.exports = {
+	isMobile: () => false
+};

server/pages/index.jade

@@ -44,8 +44,11 @@ html(lang=lang, dir=isRTL ? 'rtl' : 'ltr', class=isFluidWidth ? 'is-fluid-width'
 				link(rel='stylesheet', href=urls['style.css'])
 
 	body(class=isRTL ? 'rtl' : '')
-		#wpcom.wpcom-site
-			.wpcom-site__logo.noticon.noticon-wordpress
+		if layout
+			#wpcom.wpcom-site!= layout
+		else
+			#wpcom.wpcom-site
+				.wpcom-site__logo.noticon.noticon-wordpress
 		if badge
 			div.environment-badge
 				a(class='bug-report', href=feedbackURL, title='Report an issue', target='_blank')

server/pages/index.js

@@ -4,12 +4,16 @@ var express = require( 'express' ),
 	qs = require( 'qs' ),
 	cookieParser = require( 'cookie-parser' ),
 	i18nUtils = require( 'lib/i18n-utils' ),
-	debug = require( 'debug' )( 'calypso:pages' );
+	assign = require( 'lodash/object/assign' ),
+	debug = require( 'debug' )( 'calypso:pages' ),
+	React = require( 'react' ),
+	ReactInjection = require( 'react/lib/ReactInjection' );
 
 var config = require( 'config' ),
 	sanitize = require( 'sanitize' ),
 	utils = require( 'bundler/utils' ),
-	sections = require( '../../client/sections' );
+	sections = require( '../../client/sections' ),
+	i18n = require( 'lib/mixins/i18n' );
 
 var HASH_LENGTH = 10,
 	URL_BASE_PATH = '/calypso',
@@ -344,12 +348,25 @@ module.exports = function() {
 		}
 	} );
 
-	app.get( '/design', function( req, res ) {
+	app.get( '/design/type?/:tier?', function( req, res ) {
 		if ( req.cookies.wordpress_logged_in || ! config.isEnabled( 'manage/themes/logged-out' ) ) {
 			// the user is probably logged in
 			renderLoggedInRoute( req, res );
 		} else {
-			renderLoggedOutRoute( req, res );
+			ReactInjection.Class.injectMixin( i18n.mixin );
+			i18n.initialize();
+
+			const themesLoggedOutLayoutComponent = require( 'layout/themes-logged-out' ),
+				themesLoggedOutLayout = React.createFactory( themesLoggedOutLayoutComponent ),
+				context = getDefaultContext( req ),
+				props = {
+					section: 'themes',
+					tier: req.params.tier || 'all',
+				};
+
+			context.layout = React.renderToString( themesLoggedOutLayout( props ) );
+
+			res.render( 'index.jade', context );
 		}
 	} );
 

shared/components/empty/index.jsx

@@ -0,0 +1,9 @@
+const React = require( 'react' );
+
+const EmptyComponent = React.createClass( {
+	render: function() {
+		return null;
+	}
+} );
+
+module.exports = EmptyComponent;

client/components/infinite-list/index.jsx → shared/components/infinite-list/index.jsx

@@ -54,25 +54,26 @@ module.exports = React.createClass( {
 	smartSetState: smartSetState,
 
 	componentWillMount: function() {
-		var url = page.current,
-			newState, scrollPosition;
+		if ( typeof( window ) !== 'undefined' ) {
+			var url = page.current,
+				newState, scrollPosition;
 
-		if ( detectHistoryNavigation.loadedViaHistory() ) {
-			newState = InfiniteListPositionsStore.get( url );
-			scrollPosition = InfiniteListScrollStore.get( url );
-		}
+			if ( detectHistoryNavigation.loadedViaHistory() ) {
+				newState = InfiniteListPositionsStore.get( url );
+				scrollPosition = InfiniteListScrollStore.get( url );
+			}
 
-		if ( newState && scrollPosition ) {
-			debug( 'overriding scrollTop:', scrollPosition );
-			newState.scrollTop = scrollPosition;
-		}
+			if ( newState && scrollPosition ) {
+				debug( 'overriding scrollTop:', scrollPosition );
+				newState.scrollTop = scrollPosition;
+			}
 
-		this.scrollHelper = new ScrollHelper( this.boundsForRef );
-		this.scrollHelper.props = this.props;
-		if ( this._contextLoaded() ) {
-			this._scrollContainer = this.props.context || window;
-			this.scrollHelper.updateContextHeight( this.getCurrentContextHeight() );
-		}
+			this.scrollHelper = new ScrollHelper( this.boundsForRef );
+			this.scrollHelper.props = this.props;
+			if ( this._contextLoaded() ) {
+				this._scrollContainer = this.props.context || window;
+				this.scrollHelper.updateContextHeight( this.getCurrentContextHeight() );
+			}
 
 		this.isScrolling = false;
 
@@ -87,9 +88,10 @@ module.exports = React.createClass( {
 				bottomPlaceholderHeight: 0,
 				scrollTop: 0
 			};
+			debug( 'infinite list mounting', newState );
+			this.setState( newState );
+		}
 		}
-		debug( 'infinite list mounting', newState );
-		this.setState( newState );
 	},
 
 	componentDidMount: function() {
@@ -316,21 +318,22 @@ module.exports = React.createClass( {
 	},
 
 	render: function() {
-		var lastRenderedIndex = this.state.lastRenderedIndex,
+		var lastRenderedIndex = this.state ? this.state.lastRenderedIndex : this.props.items.length - 1,
+			firstRenderedIndex = this.state ? this.state.firstRenderedIndex : 0,
 			itemsToRender = [],
 			propsToTransfer = omit( this.props, Object.keys( this.constructor.propTypes ) ),
 			spacerClassName = 'infinite-list__spacer',
 			i;
 
-		if ( lastRenderedIndex === -1 || lastRenderedIndex > this.props.items.length - 1 ) {
+		if ( this.state && lastRenderedIndex === -1 || lastRenderedIndex > this.props.items.length - 1 ) {
 			debug( 'resetting lastRenderedIndex, currently at %s, %d items', lastRenderedIndex, this.props.items.length );
 			lastRenderedIndex = Math.min( this.state.firstRenderedIndex + this.scrollHelper.initialLastRenderedIndex(), this.props.items.length - 1 );
 			debug( 'reset lastRenderedIndex to %s', lastRenderedIndex );
 		}
 
-		debug( 'rendering %d to %d', this.state.firstRenderedIndex, lastRenderedIndex );
+		debug( 'rendering %d to %d', firstRenderedIndex, lastRenderedIndex );
 
-		for ( i = this.state.firstRenderedIndex; i <= lastRenderedIndex; i++ ) {
+		for ( i = firstRenderedIndex; i <= lastRenderedIndex; i++ ) {
 			itemsToRender.push( this.props.renderItem( this.props.items[ i ], i ) );
 		}
 
@@ -342,12 +345,12 @@ module.exports = React.createClass( {
 			<div {...propsToTransfer}>
 				<div ref="topPlaceholder"
 					className={ spacerClassName }
-					style={ { height: this.state.topPlaceholderHeight } } />
+					style={ { height: this.state ? this.state.topPlaceholderHeight : 0 } } />
 				{ itemsToRender }
 				{ this.props.renderTrailingItems() }
 				<div ref="bottomPlaceholder"
 					className={ spacerClassName }
-					style={ { height: this.state.bottomPlaceholderHeight } } />
+					style={ { height: this.state ? this.state.bottomPlaceholderHeight : 0 } } />
 			</div>
 		);
 	},

client/components/search/index.jsx → shared/components/search/index.jsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-var React = require( 'react' ),
+var React = require( 'react/addons' ),
 	classNames = require( 'classnames' ),
 	debounce = require( 'lodash/function/debounce' ),
 	noop = () => {};
@@ -60,12 +60,17 @@ module.exports = React.createClass( {
 		};
 	},
 
-	componentWillMount: function() {
+	componentDidMount: function() {
 		this.id = _instance;
 		_instance++;
 		this.onSearch = this.props.delaySearch
 			? debounce( this.props.onSearch, SEARCH_DEBOUNCE_MS )
 			: this.props.onSearch;
+		this.onSearch = ( this.props.delaySearch ) ? debounce( this.props.onSearch, SEARCH_DEBOUNCE_MS ) : this.props.onSearch;
+
+		if ( this.props.autoFocus ) {
+			this.focus();
+		}
 	},
 
 	componentWillReceiveProps: function( nextProps ) {
@@ -114,12 +119,6 @@ module.exports = React.createClass( {
 		this.props.onSearchChange( this.state.keyword );
 	},
 
-	componentDidMount: function() {
-		if ( this.props.autoFocus ) {
-			this.focus();
-		}
-	},
-
 	focus: function() {
 		React.findDOMNode( this.refs.searchInput ).focus();
 	},

client/components/select-dropdown/index.jsx → shared/components/select-dropdown/index.jsx

@@ -68,7 +68,7 @@ var SelectDropdown = React.createClass( {
 		return initialState;
 	},
 
-	componentWillMount: function() {
+	componentDidMount: function() {
 		this.id = _instance;
 		_instance++;
 	},

client/components/spinner/index.jsx → shared/components/spinner/index.jsx

@@ -43,7 +43,8 @@ Spinner = React.createClass( {
 	 *                   elements, or false otherwise.
 	 */
 	isSVGCSSAnimationSupported: function() {
-		return ! /(MSIE |Trident\/)/.test( global.window.navigator.userAgent );
+		return false;
+		return typeof( window ) === undefined || ! /(MSIE |Trident\/)/.test( global.window.navigator.userAgent );
 	},
 
 	getClassName: function() {

shared/layout/themes-logged-out.jsx

@@ -0,0 +1,63 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import partialRight from 'lodash/function/partialRight';
+
+/**
+ * Internal dependencies
+ */
+import Masterbar from './masterbar';
+//import NoticesList from 'notices/notices-list';
+//import notices from 'notices';
+//import title from 'lib/screen-title';
+import Main from 'components/main';
+import themesComponent from 'my-sites/themes/themes-selection';
+import getButtonOptions from 'my-sites/themes/theme-options';
+
+const themesFactory = React.createFactory( themesComponent );
+
+const ThemesLoggedOutLayout = React.createClass( {
+
+	getDefaultProps() {
+		return {
+			section: 'themes',
+		}
+	},
+
+	themesProps: {
+		getOptions: partialRight( getButtonOptions, () => {}, () => {} ),
+		sites: false,
+		setSelectedTheme: () => {},
+		togglePreview: () => {},
+		loggedIn: false,
+	},
+
+	getTier() {
+		const tier = typeof( window ) !== 'undefined' && window.location.pathname.match( /^\/design\/type\/(free|premium|all)\/?/ );
+		if ( tier ) {
+			return { tier: tier[1] };
+		}
+	},
+
+	render() {
+		const sectionClass = 'wp' + ( this.props.section ? ' is-section-' + this.props.section : '' );
+		return (
+						<div className={ sectionClass }>
+							<Masterbar />
+							<div id="content" className="wp-content">
+								<div id="primary" className="wp-primary wp-section">
+									<Main className="themes">
+									{ themesFactory( Object.assign( {}, this.themesProps, this.getTier(), this.props ) ) }
+									</Main>
+								</div>
+							</div>
+							<div id="tertiary" className="wp-overlay fade-background">
+								{ this.props.tertiary }
+							</div>
+						</div>
+		);
+	}
+} );
+
+export default ThemesLoggedOutLayout;

shared/my-sites/themes/index.js

@@ -22,7 +22,8 @@ const routing = {
 	middlewares: [
 		{ value: controller.navigation, enableLoggedOut: false },
 		{ value: controller.siteSelection, enableLoggedOut: false },
-		{ value: themesController.themes, enableLoggedOut: true },
+		{ value: themesController.themes, enableLoggedOut: false },
+		{ value: () => {}, enableLoggedOut: true }
 	]
 };