Framework: introduce sections middleware

client/boot/common.js

@@ -21,6 +21,7 @@ import { hasTouch } from 'lib/touch-detect';
 import { setLocale, setLocaleRawData } from 'state/ui/language/actions';
 import { setCurrentUserOnReduxStore } from 'lib/redux-helpers';
 import { installPerfmonPageHandlers } from 'lib/perfmon';
+import * as sectionsMiddleware from 'sections-middleware';
 
 const debug = debugFactory( 'calypso' );
 
@@ -74,7 +75,7 @@ const setupContextMiddleware = reduxStore => {
 };
 
 // We need to require sections to load React with i18n mixin
-const loadSectionsMiddleware = () => require( 'sections' ).load();
+const loadSectionsMiddleware = () => sectionsMiddleware.setupRoutes();
 
 const loggedOutMiddleware = currentUser => {
 	if ( currentUser.get() ) {
@@ -95,8 +96,7 @@ const loggedOutMiddleware = currentUser => {
 		} );
 	}
 
-	const sections = require( 'sections' );
-	const validSections = sections.get().reduce( ( acc, section ) => {
+	const validSections = sectionsMiddleware.getSections().reduce( ( acc, section ) => {
 		return section.enableLoggedOut ? acc.concat( section.paths ) : acc;
 	}, [] );
 	const isValidSection = sectionPath =>

client/extensions/wp-job-manager/components/navigation/index.jsx

@@ -16,7 +16,7 @@ import SectionNav from 'components/section-nav';
 import SectionNavTabs from 'components/section-nav/tabs';
 import SectionNavTabItem from 'components/section-nav/item';
 import { addSiteFragment } from 'lib/route';
-import sectionsModule from 'sections';
+import sectionsModule from 'sections-middleware';
 import { Tabs } from '../../constants';
 import { getSiteSlug } from 'state/sites/selectors';
 import { getSelectedSiteId } from 'state/ui/selectors';
@@ -32,7 +32,7 @@ class Navigation extends Component {
 	};
 
 	getSettingsPath() {
-		const sections = sectionsModule.get();
+		const sections = sectionsModule.getSections();
 		const section = find( sections, value => value.name === 'wp-job-manager' );
 
 		return get( section, 'settings_path' );

client/extensions/zoninator/app/util.js

@@ -9,10 +9,10 @@ import { find, get } from 'lodash';
 /**
  * Internal dependencies
  */
-import sectionsModule from 'sections';
+import sectionsModule from 'sections-middleware';
 
 const getSettingsPath = () => {
-	const sections = sectionsModule.get();
+	const sections = sectionsModule.getSections();
 	const section = find( sections, value => value.name === 'zoninator' );
 
 	return get( section, 'settings_path' );

client/my-sites/plugins/utils.js

@@ -10,11 +10,11 @@ import { find, get, includes } from 'lodash';
  * Internal dependencies
  */
 import config from 'config';
-import sectionsModule from 'sections';
+import sectionsModule from 'sections-middleware';
 
 export function getExtensionSettingsPath( plugin ) {
 	const pluginSlug = get( plugin, 'slug', '' );
-	const sections = sectionsModule.get();
+	const sections = sectionsModule.getSections();
 	const section = find( sections, value => value.name === pluginSlug );
 	const env = get( section, 'envId', [] );
 

client/sections-middleware.js

@@ -0,0 +1,103 @@
+/** @format */
+/**
+ * External dependencies
+ */
+import config from 'config';
+import page from 'page';
+import { find, filter, isEmpty } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import { activateNextLayoutFocus } from 'state/ui/layout-focus/actions';
+import * as LoadingError from 'layout/error';
+import * as controller from './controller/index.web';
+import { restoreLastSession } from 'lib/restore-last-path';
+import { hub as preloadHub } from 'sections-preload';
+import { switchCSS } from 'lib/i18n-utils/switch-locale';
+import { pathToRegExp } from './utils';
+
+import sections from './sections';
+
+const _loadedSections = {};
+
+function maybeLoadCSS( sectionName ) {
+	//eslint-disable-line no-unused-vars
+	const section = find( sections, { name: sectionName } );
+
+	if ( ! ( section && section.css ) ) {
+		return;
+	}
+
+	const url =
+		typeof document !== 'undefined' && document.documentElement.dir === 'rtl'
+			? section.css.urls.rtl
+			: section.css.urls.ltr;
+
+	switchCSS( 'section-css-' + section.css.id, url );
+}
+
+function preload( sectionName ) {
+	maybeLoadCSS( sectionName );
+	const filteredSections = filter( sections, { name: sectionName } );
+	if ( isEmpty( filteredSections ) ) {
+		return Promise.reject( `Attempting to load non-existent section: ${ sectionName }` );
+	}
+	return Promise.all( filteredSections.map( section => section.load() ) );
+}
+
+preloadHub.on( 'preload', preload );
+
+function activateSection( sectionDefinition, context, next ) {
+	const dispatch = context.store.dispatch;
+
+	controller.setSection( sectionDefinition )( context );
+	dispatch( { type: 'SECTION_SET', isLoading: false } );
+	dispatch( activateNextLayoutFocus() );
+	next();
+}
+
+function createPageDefinition( path, sectionDefinition ) {
+	const pathRegex = pathToRegExp( path );
+
+	page( pathRegex, function( context, next ) {
+		const envId = sectionDefinition.envId;
+		const dispatch = context.store.dispatch;
+
+		if ( envId && envId.indexOf( config( 'env_id' ) ) === -1 ) {
+			return next();
+		}
+		if ( _loadedSections[ sectionDefinition.module ] ) {
+			return activateSection( sectionDefinition, context, next );
+		}
+		if ( config.isEnabled( 'restore-last-location' ) && restoreLastSession( context.path ) ) {
+			return;
+		}
+		dispatch( { type: 'SECTION_SET', isLoading: true } );
+		preload( sectionDefinition.name )
+			.then( requiredModules => {
+				if ( ! _loadedSections[ sectionDefinition.module ] ) {
+					requiredModules.forEach( mod => mod( controller.clientRouter ) ); // if we do array
+					_loadedSections[ sectionDefinition.module ] = true;
+				}
+				return activateSection( sectionDefinition, context, next );
+			} )
+			.catch( error => {
+				console.error( error ); // eslint-disable-line
+				if ( ! LoadingError.isRetry() ) {
+					LoadingError.retry( sectionDefinition.name );
+				} else {
+					dispatch( { type: 'SECTION_SET', isLoading: false } );
+					LoadingError.show( sectionDefinition.name );
+				}
+			} );
+	} );
+}
+
+export const getSections = () => sections;
+
+export const setupRoutes = () => {
+	sections.forEach( section =>
+		section.paths.forEach( path => createPageDefinition( path, section ) )
+	);
+};

client/sections.js

@@ -11,8 +11,8 @@ const path = require( 'path' );
  * Internal dependencies
  */
 const config = require( 'config' );
-const sections = require( config( 'project' ) );
-const extensions = require( 'extensions' );
+const sections = config( 'project' ) === 'wordpress-com' ? require( 'wordpress-com' ) : [];
+const extensions = require( './extensions' );
 
 const extensionSections = extensions.map( extension => {
 	try {

client/utils.js

@@ -0,0 +1,11 @@
+/** @format */
+
+// Adapts route paths to also include wildcard
+// subroutes under the root level section.
+export function pathToRegExp( path ) {
+	// Prevents root level double dash urls from being validated.
+	if ( path === '/' ) {
+		return path;
+	}
+	return new RegExp( '^' + path + '(/.*)?$' );
+}