From af416dccad08cc289bdaa55c18d198e06a8afa9d Mon Sep 17 00:00:00 2001 From: Jason Moon Date: Fri, 25 Oct 2019 16:50:08 -0600 Subject: [PATCH 1/5] Use URL object for query string modification --- modules/search/instant-search/index.jsx | 1 + modules/search/instant-search/lib/query-string.js | 9 ++++----- package.json | 1 + yarn.lock | 5 +++++ 4 files changed, 11 insertions(+), 5 deletions(-) diff --git a/modules/search/instant-search/index.jsx b/modules/search/instant-search/index.jsx index f475bde8ca638..5bacf53ed9035 100644 --- a/modules/search/instant-search/index.jsx +++ b/modules/search/instant-search/index.jsx @@ -3,6 +3,7 @@ /** * External dependencies */ +import 'url-polyfill'; import { h, render } from 'preact'; /** diff --git a/modules/search/instant-search/lib/query-string.js b/modules/search/instant-search/lib/query-string.js index d610416327889..61ff930ae61e4 100644 --- a/modules/search/instant-search/lib/query-string.js +++ b/modules/search/instant-search/lib/query-string.js @@ -20,17 +20,16 @@ function getQuery() { function pushQueryString( queryString ) { // NOTE: This erases location.pathname if ( history.pushState ) { - const newUrl = queryString - ? `${ window.location.protocol }//${ window.location.host }?${ queryString }` - : `${ window.location.protocol }//${ window.location.host }${ window.location.pathname }`; - window.history.pushState( { path: newUrl }, '', newUrl ); + const url = new window.URL( window.location.href ); + url.search = queryString; + window.history.pushState( null, null, url.toString() ); window.dispatchEvent( new Event( 'queryStringChange' ) ); } } export function restorePreviousHref( initialHref ) { if ( history.pushState ) { - window.history.pushState( { href: initialHref }, '', initialHref ); + window.history.pushState( null, null, initialHref ); window.dispatchEvent( new Event( 'queryStringChange' ) ); } } diff --git a/package.json b/package.json index 15931b7cf6f86..a05be6c2f80c4 100644 --- a/package.json +++ b/package.json @@ -154,6 +154,7 @@ "swiper": "4.5.1", "uglify-save-license": "0.4.1", "unfetch": "4.1.0", + "url-polyfill": "1.1.7", "webpack": "4.41.0", "webpack-cli": "3.3.9" }, diff --git a/yarn.lock b/yarn.lock index ed4a7d41ceab9..2dbfe8be3aca6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13079,6 +13079,11 @@ url-loader@1.1.2: mime "^2.0.3" schema-utils "^1.0.0" +url-polyfill@1.1.7: + version "1.1.7" + resolved "https://registry.yarnpkg.com/url-polyfill/-/url-polyfill-1.1.7.tgz#402ee84360eb549bbeb585f4c7971e79a31de9e3" + integrity sha512-ZrAxYWCREjmMtL8gSbSiKKLZZticgihCvVBtrFbUVpyoETt8GQJeG2okMWA8XryDAaHMjJfhnc+rnhXRbI4DXA== + url-template@^2.0.8: version "2.0.8" resolved "https://registry.yarnpkg.com/url-template/-/url-template-2.0.8.tgz#fc565a3cccbff7730c775f5641f9555791439f21" From 776423e528e36e24a8cc55817810181fcf4cfd99 Mon Sep 17 00:00:00 2001 From: Jason Moon Date: Fri, 25 Oct 2019 16:56:06 -0600 Subject: [PATCH 2/5] Pass siteUrl via PHP --- modules/search/class.jetpack-search.php | 1 + modules/search/instant-search/lib/query-string.js | 4 +++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/modules/search/class.jetpack-search.php b/modules/search/class.jetpack-search.php index 5b72ae3e8d7a9..0e937e862026a 100644 --- a/modules/search/class.jetpack-search.php +++ b/modules/search/class.jetpack-search.php @@ -251,6 +251,7 @@ public function load_assets() { 'postTypeFilters' => $widget_options['post_types'], 'postTypes' => $post_type_labels, 'siteId' => Jetpack::get_option( 'id' ), + 'siteUrl' => site_url(), 'sort' => $widget_options['sort'], 'widgets' => array_values( $widgets ), ); diff --git a/modules/search/instant-search/lib/query-string.js b/modules/search/instant-search/lib/query-string.js index 61ff930ae61e4..8e90453f58d03 100644 --- a/modules/search/instant-search/lib/query-string.js +++ b/modules/search/instant-search/lib/query-string.js @@ -18,9 +18,11 @@ function getQuery() { } function pushQueryString( queryString ) { - // NOTE: This erases location.pathname if ( history.pushState ) { const url = new window.URL( window.location.href ); + if ( window[ SERVER_OBJECT_NAME ] && 'siteUrl' in window[ SERVER_OBJECT_NAME ] ) { + url.href = window[ SERVER_OBJECT_NAME ].siteUrl; + } url.search = queryString; window.history.pushState( null, null, url.toString() ); window.dispatchEvent( new Event( 'queryStringChange' ) ); From 95e4047969befc4af5cc911ff1edf75d9fd93882 Mon Sep 17 00:00:00 2001 From: Jason Moon Date: Fri, 25 Oct 2019 17:17:19 -0600 Subject: [PATCH 3/5] Move url-polyfill import to query-string lib --- modules/search/instant-search/index.jsx | 1 - modules/search/instant-search/lib/query-string.js | 1 + 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/search/instant-search/index.jsx b/modules/search/instant-search/index.jsx index 5bacf53ed9035..f475bde8ca638 100644 --- a/modules/search/instant-search/index.jsx +++ b/modules/search/instant-search/index.jsx @@ -3,7 +3,6 @@ /** * External dependencies */ -import 'url-polyfill'; import { h, render } from 'preact'; /** diff --git a/modules/search/instant-search/lib/query-string.js b/modules/search/instant-search/lib/query-string.js index 8e90453f58d03..3025cf49c81f9 100644 --- a/modules/search/instant-search/lib/query-string.js +++ b/modules/search/instant-search/lib/query-string.js @@ -1,6 +1,7 @@ /** * External dependencies */ +import 'url-polyfill'; import { decode, encode } from 'qss'; // NOTE: We only import the get package here for to reduced bundle size. // Do not import the entire lodash library! From 66f8ec418eac3fbe91f546886002a227ee338d45 Mon Sep 17 00:00:00 2001 From: Jason Moon Date: Mon, 28 Oct 2019 09:03:14 -0600 Subject: [PATCH 4/5] Use home_url instead of site_url --- modules/search/class.jetpack-search.php | 2 +- modules/search/instant-search/lib/query-string.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/modules/search/class.jetpack-search.php b/modules/search/class.jetpack-search.php index 0e937e862026a..1271afc692825 100644 --- a/modules/search/class.jetpack-search.php +++ b/modules/search/class.jetpack-search.php @@ -247,11 +247,11 @@ public function load_assets() { // This is probably a temporary filter for testing the prototype. $options = array( 'enableLoadOnScroll' => false, + 'homeUrl' => home_url(), 'locale' => str_replace( '_', '-', get_locale() ), 'postTypeFilters' => $widget_options['post_types'], 'postTypes' => $post_type_labels, 'siteId' => Jetpack::get_option( 'id' ), - 'siteUrl' => site_url(), 'sort' => $widget_options['sort'], 'widgets' => array_values( $widgets ), ); diff --git a/modules/search/instant-search/lib/query-string.js b/modules/search/instant-search/lib/query-string.js index 3025cf49c81f9..64e6fc995ba8b 100644 --- a/modules/search/instant-search/lib/query-string.js +++ b/modules/search/instant-search/lib/query-string.js @@ -21,8 +21,8 @@ function getQuery() { function pushQueryString( queryString ) { if ( history.pushState ) { const url = new window.URL( window.location.href ); - if ( window[ SERVER_OBJECT_NAME ] && 'siteUrl' in window[ SERVER_OBJECT_NAME ] ) { - url.href = window[ SERVER_OBJECT_NAME ].siteUrl; + if ( window[ SERVER_OBJECT_NAME ] && 'homeUrl' in window[ SERVER_OBJECT_NAME ] ) { + url.href = window[ SERVER_OBJECT_NAME ].homeUrl; } url.search = queryString; window.history.pushState( null, null, url.toString() ); From 3671d1dcde36f0474987ff639a304afd30b7f000 Mon Sep 17 00:00:00 2001 From: Jason Moon Date: Mon, 28 Oct 2019 09:58:33 -0600 Subject: [PATCH 5/5] =?UTF-8?q?Listen=20to=20window=E2=80=99s=20popstate?= =?UTF-8?q?=20events=20for=20QS=20changes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- modules/search/instant-search/components/search-app.jsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/modules/search/instant-search/components/search-app.jsx b/modules/search/instant-search/components/search-app.jsx index 3310773c87dd8..ad5d9ce6be830 100644 --- a/modules/search/instant-search/components/search-app.jsx +++ b/modules/search/instant-search/components/search-app.jsx @@ -58,9 +58,11 @@ class SearchApp extends Component { this.input.current.focus(); } + window.addEventListener( 'popstate', this.onChangeQueryString ); window.addEventListener( 'queryStringChange', this.onChangeQueryString ); } componentWillUnmount() { + window.removeEventListener( 'popstate', this.onChangeQueryString ); window.removeEventListener( 'queryStringChange', this.onChangeQueryString ); }