Instant Search: Add sidebar filters support

.gitignore

@@ -47,7 +47,6 @@ phpcs.xml
 ## Things we will need in release branches
 /_inc/blocks
 /_inc/build
-/_inc/search/dist/
 /modules/**/*.min.css
 /modules/**/*-rtl.css
 /css

modules/search/.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+	// Use root level ESlint configuration.
+	// JavaScript files inside this folder are meant to be transpiled by Webpack.
+	root: true,
+	extends: [ '../../.eslintrc.js' ],
+};

modules/search/class.jetpack-search.php

@@ -194,17 +194,60 @@ public function init_hooks() {
 		add_action( 'jetpack_deactivate_module_search', array( $this, 'move_search_widgets_to_inactive' ) );
 	}
 
+	public function is_instant_search() {
+		if ( defined( 'JETPACK_SEARCH_PROTOTYPE' ) ) {
+			return true;
+		}
+		return false;
+	}
+
 	/**
-	 * Loads assets for Jetpack Search Prototype featuring Search As You Type experience.
+	 * Loads assets for Jetpack Instant Search Prototype.
 	 */
 	public function load_assets() {
-		if ( defined( 'JETPACK_SEARCH_PROTOTYPE' ) ) {
-			$script_relative_path = '_inc/search/dist/jp-search.bundle.js';
+		if ( $this->is_instant_search() ) {
+			$script_relative_path = '_inc/build/instant-search/jp-search.bundle.js';
 			if ( file_exists( JETPACK__PLUGIN_DIR . $script_relative_path ) ) {
 				$script_version = self::get_asset_version( $script_relative_path );
 				$script_path    = plugins_url( $script_relative_path, JETPACK__PLUGIN_FILE );
-				wp_enqueue_script( 'jetpack-search', $script_path, array(), $script_version, false );
+				wp_enqueue_script( 'jetpack-instant-search', $script_path, array(), $script_version, true );
+
+				//override wp.com blog_id for testing
+				if ( defined( 'JETPACK_INSTANT_SEARCH_BLOG_ID' ) ) {
+					$id = JETPACK_INSTANT_SEARCH_BLOG_ID;
+				} else {
+					$id = Jetpack::get_option( 'id' );
+				}
+				//wp_add_inline_script( 'jetpack-search', 'window.JetpackInstantSearchOptions = { siteId: ' . $id . '}', 'before' );
+				wp_add_inline_script( 'jetpack-instant-search', 'window.JetpackInstantSearchOptions = { siteId: ' . Jetpack::get_option( 'id' ) .'}', 'before' );
+
 			}
+
+			$style_relative_path = '_inc/build/instant-search/instant-search.min.css';
+			if ( file_exists( JETPACK__PLUGIN_DIR . $script_relative_path ) ) {
+				$style_version = self::get_asset_version( $style_relative_path );
+				$style_path    = plugins_url( $style_relative_path, JETPACK__PLUGIN_FILE );
+				wp_enqueue_style( 'jetpack-instant-search', $style_path, array(), $style_version );
+			}
+
+			//filters configuration
+			$filters = Jetpack_Search_Helpers::get_filters_from_widgets();
+			$widgets = array();
+			foreach( $filters as $filt => $data ) {
+				if ( ! isset( $widgets[$data['widget_id']] ) ) {
+					$widgets[$data['widget_id']]['filters'] = [];
+					$widgets[$data['widget_id']]['widget_id'] = $data['widget_id'];
+				}
+				$f = $data;
+				$f['filter_id'] = $filt;
+				$widgets[$data['widget_id']]['filters'][] = $f;
+			}
+			wp_localize_script(
+				'jetpack-instant-search', 'jetpack_instant_search_filters', array(
+					'widgets' => array_values( $widgets ),
+				)
+			);
+
 		}
 	}
 

modules/search/instant-search/README.md

@@ -0,0 +1,9 @@
+# Jetpack Instant Search
+
+The **Jetpack Instant Search"** module currently consists of a JavaScript app built on **Preact**. In its current form, it enhances WordPress Search pages by presenting search results while the user is still typing.
+
+Eventually, we expect this module to enhance all front-end views that enable the user to quickly jump into a full-page search experience.
+
+## Why Preact?
+
+Given that we load this module's assets on every page load, we were concerned by the large bundle sizes for both React and `@wordpress/element` (35.6kB gzipped and 61kB gzipped, respectively). We ultimately decided on using Preact, which features a significantly smaller bundle footprint (4.7kB) and full API compatibility with React.

modules/search/instant-search/components/api.js

@@ -0,0 +1,112 @@
+/**
+ * External dependencies
+ */
+import fetch from 'unfetch';
+
+const FIELDS = [ 'title_html', 'author', 'permalink.url.raw' ];
+
+/**
+ * @preserve jquery-param (c) 2015 KNOWLEDGECODE | MIT
+ * From https://github.com/knowledgecode/jquery-param
+ */
+function query_params( a ) {
+	var s = [];
+	var add = function( k, v ) {
+		v = typeof v === 'function' ? v() : v;
+		v = v === null ? '' : v === undefined ? '' : v;
+		s[ s.length ] = encodeURIComponent( k ) + '=' + encodeURIComponent( v );
+	};
+	var buildParams = function( prefix, obj ) {
+		var i, len, key;
+
+		if ( prefix ) {
+			if ( Array.isArray( obj ) ) {
+				for ( i = 0, len = obj.length; i < len; i++ ) {
+					buildParams(
+						prefix + '[' + ( typeof obj[ i ] === 'object' && obj[ i ] ? i : '' ) + ']',
+						obj[ i ]
+					);
+				}
+			} else if ( String( obj ) === '[object Object]' ) {
+				for ( key in obj ) {
+					buildParams( prefix + '[' + key + ']', obj[ key ] );
+				}
+			} else {
+				add( prefix, obj );
+			}
+		} else if ( Array.isArray( obj ) ) {
+			for ( i = 0, len = obj.length; i < len; i++ ) {
+				add( obj[ i ].name, obj[ i ].value );
+			}
+		} else {
+			for ( key in obj ) {
+				buildParams( key, obj[ key ] );
+			}
+		}
+		return s;
+	};
+	return buildParams( '', a ).join( '&' );
+}
+
+function getAPIUrl( siteId, query, aggs ) {
+	var obj = {
+		query: query,
+		fields: FIELDS,
+		aggregations: aggs,
+	};
+	return (
+		`https://public-api.wordpress.com/rest/v1.3/sites/${ siteId }/search?` + query_params( obj )
+	);
+}
+
+export function search( siteId, query, aggs ) {
+	return fetch( getAPIUrl( siteId, query, aggs ) );
+}
+
+export function buildAggs( filterConfig ) {
+	var aggs = {};
+	if ( filterConfig ) {
+		filterConfig.widgets.forEach( function( widget ) {
+			widget.filters.forEach( function( filter ) {
+				switch ( filter.type ) {
+					case 'date_histogram':
+						var field = filter.field == 'post_date_gmt' ? 'date_gmt' : 'date';
+						aggs[ filter.filter_id ] = {
+							date_histogram: {
+								field: field,
+								interval: filter.interval,
+							},
+						};
+						break;
+					case 'taxonomy':
+						var field = 'taxonomy.' + filter.taxonomy;
+						switch ( filter.taxonomy ) {
+							case 'post_tag':
+								field = 'tag';
+								break;
+							case 'category':
+								field = 'category';
+								break;
+						}
+						field = field + '.slug';
+						aggs[ filter.filter_id ] = {
+							terms: {
+								field: field,
+								size: filter.count,
+							},
+						};
+						break;
+					case 'post_type':
+						aggs[ filter.filter_id ] = {
+							terms: {
+								field: 'post_type',
+								size: filter.count,
+							},
+						};
+						break;
+				}
+			} );
+		} );
+	}
+	return aggs;
+}

modules/search/instant-search/components/search-filter-dates.jsx

@@ -0,0 +1,37 @@
+/** @jsx h */
+
+/**
+ * External dependencies
+ */
+import Component from 'preact';
+import strip from 'strip';
+
+class SearchFilterDates extends Component {
+	renderWrapper( el ) {
+		const { title } = this.props;
+		return (
+			<div>
+				<h4 className="jetpack-search-filters-widget__sub-heading">{ title }</h4>
+				<ul className="jetpack-search-filters-widget__filter-list">{ el }</ul>
+			</div>
+		);
+	}
+
+	render() {
+		const { title, agg_result = null } = this.props;
+
+		return (
+			<div>
+				<h4 className="jetpack-search-filters-widget__sub-heading">{ title }</h4>
+				<ul className="jetpack-search-filters-widget__filter-list">{ null }</ul>
+			</div>
+		);
+		//		if ( ! agg_result ) {
+		//			return this.renderWrapper( null );
+		//		}
+		//		//TODO: fixme
+		//		return this.renderWrapper( null );
+	}
+}
+
+export default SearchFilterDates;