Update the URL package to be PHP compliant

WordPress · Jul 31, 2018 · 8b2844b · 8b2844b
1 parent 7231333
commit 8b2844b
Show file tree

Hide file tree

Showing 13 changed files with 55 additions and 43 deletions.
diff --git a/core-blocks/embed/index.js b/core-blocks/embed/index.js
@@ -3,7 +3,6 @@
  */
 import { parse } from 'url';
 import { includes, kebabCase, toLower } from 'lodash';
-import httpBuildQuery from 'http-build-query';
 import memoize from 'memize';
 import classnames from 'classnames';
 
@@ -16,6 +15,7 @@ import { Button, Placeholder, Spinner, SandBox, IconButton, Toolbar } from '@wor
 import { createBlock } from '@wordpress/blocks';
 import { RichText, BlockControls } from '@wordpress/editor';
 import apiFetch from '@wordpress/api-fetch';
+import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -27,7 +27,9 @@ import './editor.scss';
 const HOSTS_NO_PREVIEWS = [ 'facebook.com' ];
 
 // Caches the embed API calls, so if blocks get transformed, or deleted and added again, we don't spam the API.
-const wpEmbedAPI = memoize( ( url ) => apiFetch( { path: `/oembed/1.0/proxy?${ httpBuildQuery( { url } ) }` } ) );
+const wpEmbedAPI = memoize( ( url ) =>
+	apiFetch( { path: addQueryArgs( '/oembed/1.0/proxy', { url } ) } )
+);
 
 const matchesPatterns = ( url, patterns = [] ) => {
 	return patterns.some( ( pattern ) => {

diff --git a/core-blocks/latest-posts/edit.js b/core-blocks/latest-posts/edit.js
@@ -4,7 +4,6 @@
 import { get, isUndefined, pickBy } from 'lodash';
 import moment from 'moment';
 import classnames from 'classnames';
-import httpBuildQuery from 'http-build-query';
 
 /**
  * WordPress dependencies
@@ -27,6 +26,7 @@ import {
 	BlockAlignmentToolbar,
 	BlockControls,
 } from '@wordpress/editor';
+import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -160,19 +160,19 @@ class LatestPostsEdit extends Component {
 
 export default withAPIData( ( props ) => {
 	const { postsToShow, order, orderBy, categories } = props.attributes;
-	const latestPostsQuery = httpBuildQuery( pickBy( {
+	const latestPostsQuery = pickBy( {
 		categories,
 		order,
 		orderby: orderBy,
 		per_page: postsToShow,
 		_fields: [ 'date_gmt', 'link', 'title' ],
-	}, ( value ) => ! isUndefined( value ) ) );
-	const categoriesListQuery = httpBuildQuery( {
+	}, ( value ) => ! isUndefined( value ) );
+	const categoriesListQuery = {
 		per_page: 100,
 		_fields: [ 'id', 'name', 'parent' ],
-	} );
+	};
 	return {
-		latestPosts: `/wp/v2/posts?${ latestPostsQuery }`,
-		categoriesList: `/wp/v2/categories?${ categoriesListQuery }`,
+		latestPosts: addQueryArgs( '/wp/v2/posts', latestPostsQuery ),
+		categoriesList: addQueryArgs( '/wp/v2/categories', categoriesListQuery ),
 	};
 } )( LatestPostsEdit );
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -30,11 +30,11 @@
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
 		"@wordpress/keycodes": "file:../keycodes",
+		"@wordpress/url": "file:../url",
 		"classnames": "^2.2.5",
 		"clipboard": "^1.7.1",
 		"dom-scroll-into-view": "^1.2.1",
 		"element-closest": "^2.0.2",
-		"http-build-query": "^0.7.0",
 		"lodash": "^4.17.10",
 		"memize": "^1.0.5",
 		"moment": "^2.22.1",

diff --git a/packages/components/src/server-side-render/index.js b/packages/components/src/server-side-render/index.js
@@ -12,7 +12,7 @@ import {
 } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';
-import httpBuildQuery from 'http-build-query';
+import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies.
@@ -21,8 +21,10 @@ import Placeholder from '../placeholder';
 import Spinner from '../spinner';
 
 export function rendererPathWithAttributes( block, attributes = null ) {
-	return `/gutenberg/v1/block-renderer/${ block }?context=edit` +
-			( null !== attributes ? '&' + httpBuildQuery( { attributes } ) : '' );
+	return addQueryArgs( `/gutenberg/v1/block-renderer/${ block }`, {
+		context: 'edit',
+		...( null !== attributes ? { attributes } : {} ),
+	} );
 }
 
 export class ServerSideRender extends Component {

diff --git a/packages/editor/package.json b/packages/editor/package.json
@@ -46,7 +46,6 @@
 		"dom-react": "^2.2.1",
 		"dom-scroll-into-view": "^1.2.1",
 		"element-closest": "^2.0.2",
-		"http-build-query": "^0.7.0",
 		"lodash": "^4.17.10",
 		"memize": "^1.0.5",
 		"react-autosize-textarea": "^3.0.2",

diff --git a/packages/editor/src/components/page-attributes/parent.js b/packages/editor/src/components/page-attributes/parent.js
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { get } from 'lodash';
-import httpBuildQuery from 'http-build-query';
 
 /**
  * WordPress dependencies
@@ -11,6 +10,7 @@ import { __ } from '@wordpress/i18n';
 import { TreeSelect, withAPIData } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
 import { withSelect, withDispatch } from '@wordpress/data';
+import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -65,17 +65,17 @@ const applyWithDispatch = withDispatch( ( dispatch ) => {
 const applyWithAPIDataItems = withAPIData( ( { postType, postId } ) => {
 	const isHierarchical = get( postType, [ 'hierarchical' ], false );
 	const restBase = get( postType, [ 'rest_base' ], false );
-	const queryString = httpBuildQuery( {
+	const queryString = {
 		context: 'edit',
 		per_page: -1,
 		exclude: postId,
 		parent_exclude: postId,
 		_fields: [ 'id', 'parent', 'title' ],
 		orderby: 'menu_order',
 		order: 'asc',
-	} );
+	};
 	return isHierarchical && restBase ?
-		{ items: `/wp/v2/${ restBase }?${ queryString }` } :
+		{ items: addQueryArgs( `/wp/v2/${ restBase }`, queryString ) } :
 		{};
 } );
 

diff --git a/packages/editor/src/components/post-taxonomies/flat-term-selector.js b/packages/editor/src/components/post-taxonomies/flat-term-selector.js
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { isEmpty, get, unescape as unescapeString, find, throttle, uniqBy, invoke } from 'lodash';
-import httpBuildQuery from 'http-build-query';
 
 /**
  * WordPress dependencies
@@ -13,6 +12,7 @@ import { FormTokenField } from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 import apiFetch from '@wordpress/api-fetch';
+import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Module constants
@@ -77,7 +77,9 @@ class FlatTermSelector extends Component {
 	fetchTerms( params = {} ) {
 		const { taxonomy } = this.props;
 		const query = { ...DEFAULT_QUERY, ...params };
-		const request = apiFetch( { path: `/wp/v2/${ taxonomy.rest_base }?${ httpBuildQuery( query ) }` } );
+		const request = apiFetch( {
+			path: addQueryArgs( `/wp/v2/${ taxonomy.rest_base }`, query ),
+		} );
 		request.then( ( terms ) => {
 			this.setState( ( state ) => ( {
 				availableTerms: state.availableTerms.concat(
@@ -116,7 +118,7 @@ class FlatTermSelector extends Component {
 			if ( errorCode === 'term_exists' ) {
 				// If the terms exist, fetch it instead of creating a new one.
 				this.addRequest = apiFetch( {
-					path: `/wp/v2/${ taxonomy.rest_base }?${ stringify( { ...DEFAULT_QUERY, search: termName } ) }`,
+					path: addQueryArgs( `/wp/v2/${ taxonomy.rest_base }`, { ...DEFAULT_QUERY, search: termName } ),
 				} );
 				return this.addRequest.then( ( searchResult ) => {
 					return find( searchResult, ( result ) => isSameTermName( result.name, termName ) );

diff --git a/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js b/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { get, unescape as unescapeString, without, find, some, invoke } from 'lodash';
-import httpBuildQuery from 'http-build-query';
 
 /**
  * WordPress dependencies
@@ -13,6 +12,7 @@ import { TreeSelect, withSpokenMessages, Button } from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { withInstanceId, compose } from '@wordpress/compose';
 import apiFetch from '@wordpress/api-fetch';
+import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -121,7 +121,10 @@ class HierarchicalTermSelector extends Component {
 				if ( errorCode === 'term_exists' ) {
 					// search the new category created since last fetch
 					this.addRequest = apiFetch( {
-						path: `/wp/v2/${ taxonomy.rest_base }?${ httpBuildQuery( { ...DEFAULT_QUERY, parent: formParent || 0, search: formName } ) }`,
+						path: addQueryArgs(
+							`/wp/v2/${ taxonomy.rest_base }`,
+							{ ...DEFAULT_QUERY, parent: formParent || 0, search: formName }
+						),
 					} );
 					return this.addRequest
 						.then( ( searchResult ) => {
@@ -183,7 +186,9 @@ class HierarchicalTermSelector extends Component {
 		if ( ! taxonomy ) {
 			return;
 		}
-		this.fetchRequest = apiFetch( { path: `/wp/v2/${ taxonomy.rest_base }?${ httpBuildQuery( DEFAULT_QUERY ) }` } );
+		this.fetchRequest = apiFetch( {
+			path: addQueryArgs( `/wp/v2/${ taxonomy.rest_base }`, DEFAULT_QUERY ),
+		} );
 		this.fetchRequest.then(
 			( terms ) => { // resolve
 				const availableTermsTree = buildTermsTree( terms );

diff --git a/packages/editor/src/components/url-input/index.js b/packages/editor/src/components/url-input/index.js
@@ -4,7 +4,6 @@
 import { throttle } from 'lodash';
 import classnames from 'classnames';
 import scrollIntoView from 'dom-scroll-into-view';
-import httpBuildQuery from 'http-build-query';
 
 /**
  * WordPress dependencies
@@ -17,6 +16,7 @@ import { Spinner, withSpokenMessages, Popover } from '@wordpress/components';
 import { withInstanceId } from '@wordpress/compose';
 import apiFetch from '@wordpress/api-fetch';
 import deprecated from '@wordpress/deprecated';
+import { addQueryArgs } from '@wordpress/url';
 
 // Since URLInput is rendered in the context of other inputs, but should be
 // considered a separate modal node, prevent keyboard events from propagating
@@ -91,11 +91,11 @@ class URLInput extends Component {
 		} );
 
 		const request = apiFetch( {
-			path: `/gutenberg/v1/search?${ httpBuildQuery( {
+			path: addQueryArgs( '/gutenberg/v1/search', {
 				search: value,
 				per_page: 20,
 				type: 'post',
-			} ) }`,
+			} ),
 		} );
 
 		request.then( ( posts ) => {

diff --git a/packages/url/package.json b/packages/url/package.json
@@ -19,7 +19,8 @@
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"dependencies": {
-		"@babel/runtime": "^7.0.0-beta.52"
+		"@babel/runtime": "^7.0.0-beta.52",
+		"qs": "^6.5.2s"
 	},
 	"publishConfig": {
 		"access": "public"

diff --git a/packages/url/src/index.js b/packages/url/src/index.js
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { parse, format } from 'url';
+import { parse as parseURL, format as stringifyURL } from 'url';
+import { parse, stringify } from 'qs';
 
 const EMAIL_REGEXP = /^(mailto:)?[a-z0-9._%+-]+@[a-z0-9][a-z0-9.-]*\.[a-z]{2,63}$/i;
 const USABLE_HREF_REGEXP = /^(?:[a-z]+:|#|\?|\.|\/)/i;
@@ -15,11 +16,10 @@ const USABLE_HREF_REGEXP = /^(?:[a-z]+:|#|\?|\.|\/)/i;
  * @return {string}       Updated URL
  */
 export function addQueryArgs( url, args ) {
-	const parsedURL = parse( url, true );
-	const query = { ...parsedURL.query, ...args };
-	delete parsedURL.search;
+	const parsedURL = parseURL( url );
+	const query = { ...parse( parsedURL.query ), ...args };
 
-	return format( { ...parsedURL, query } );
+	return stringifyURL( { ...parsedURL, search: stringify( query ) } );
 }
 
 /**

diff --git a/packages/url/src/test/index.test.js b/packages/url/src/test/index.test.js
@@ -24,6 +24,13 @@ describe( 'addQueryArgs', () => {
 
 		expect( addQueryArgs( url, args ) ).toBe( 'https://andalouses.example/beach?night=false&sun=true&sand=false' );
 	} );
+
+	test( 'should update args to an URL with array parameters', () => {
+		const url = 'https://andalouses.example/beach?time[]=10&time[]=11';
+		const args = { beach: [ 'sand', 'rock' ] };
+
+		expect( decodeURI( addQueryArgs( url, args ) ) ).toBe( 'https://andalouses.example/beach?time[0]=10&time[1]=11&beach[0]=sand&beach[1]=rock' );
+	} );
 } );
 
 describe( 'prependHTTP', () => {