Changeset 40117

Timestamp:

02/24/2017 10:47:47 PM (8 years ago)

Author:

SergeyBiryukov

Message:

REST API: JavaScript client - improve route discovery for custom namespaces.

Fix parsing of custom namespace routes. Transform class names, removing dashes and capitalizing each word/route part so a route path of widgets/recent-posts becomes a collection with the name WidgetsRecentPosts. Correct parent route part when routes are longer than expected, reversing parse direction.

Props westonruter, jazbek, adamsilverstein, jnylen0.
Merges [40074] and [40109] to the 4.7 branch.
Fixes #39561.

Location:

branches/4.7

Files:

• . (modified) (1 prop)
• src/wp-includes/js/wp-api.js (modified) (9 diffs)
• tests/qunit/fixtures/js-widgets-endpoint.js (copied) (copied from trunk/tests/qunit/fixtures/js-widgets-endpoint.js)
• tests/qunit/fixtures/wp-api.js (modified) (2 diffs)
• tests/qunit/index.html (modified) (1 diff)
• tests/qunit/wp-includes/js/wp-api.js (modified) (1 diff)

branches/4.7/src/wp-includes/js/wp-api.js

@@ -121 +121 @@
 
     /**
+     * Helper function that capitalizes the first word and camel cases any words starting
+     * after dashes, removing the dashes.
+     */
+    wp.api.utils.capitalizeAndCamelCaseDashes = function( str ) {
+        if ( _.isUndefined( str ) ) {
+            return str;
+        }
+        str = wp.api.utils.capitalize( str );
+
+        return wp.api.utils.camelCaseDashes( str );
+    };
+
+    /**
+     * Helper function to camel case the letter after dashes, removing the dashes.
+     */
+    wp.api.utils.camelCaseDashes = function( str ) {
+        return str.replace( /-([a-z])/g, function( g ) {
+            return g[ 1 ].toUpperCase();
+        } );
+    };
+
+    /**
      * Extract a route part based on negative index.
      *
-     * @param {string} route The endpoint route.
-     * @param {int}    part  The number of parts from the end of the route to retrieve. Default 1.
-     *                       Example route `/a/b/c`: part 1 is `c`, part 2 is `b`, part 3 is `a`.
-     */
-    wp.api.utils.extractRoutePart = function( route, part ) {
+     * @param {string}   route          The endpoint route.
+     * @param {int}      part           The number of parts from the end of the route to retrieve. Default 1.
+     *                                  Example route `/a/b/c`: part 1 is `c`, part 2 is `b`, part 3 is `a`.
+     * @param {string}  [versionString] Version string, defaults to `wp.api.versionString`.
+     * @param {boolean} [reverse]       Whether to reverse the order when extracting the route part. Optional, default false.
+     */
+    wp.api.utils.extractRoutePart = function( route, part, versionString, reverse ) {
         var routeParts;
 
-        part  = part || 1;
+        part = part || 1;
+        versionString = versionString || wp.api.versionString;
 
         // Remove versions string from route to avoid returning it.
-        route = route.replace( wp.api.versionString, '' );
-        routeParts = route.split( '/' ).reverse();
+        if ( 0 === route.indexOf( '/' + versionString ) ) {
+            route = route.substr( versionString.length + 1 );
+        }
+
+        routeParts = route.split( '/' );
+        if ( reverse ) {
+            routeParts = routeParts.reverse();
+        }
         if ( _.isUndefined( routeParts[ --part ] ) ) {
             return '';
@@ -1127 +1158 @@
                 // Extract the name and any parent from the route.
                 var modelClassName,
-                        routeName  = wp.api.utils.extractRoutePart( modelRoute.index, 2 ),
-                        parentName = wp.api.utils.extractRoutePart( modelRoute.index, 4 ),
-                        routeEnd   = wp.api.utils.extractRoutePart( modelRoute.index, 1 );
+                    routeName  = wp.api.utils.extractRoutePart( modelRoute.index, 2, routeModel.get( 'versionString' ), true ),
+                    parentName = wp.api.utils.extractRoutePart( modelRoute.index, 1, routeModel.get( 'versionString' ), false ),
+                    routeEnd   = wp.api.utils.extractRoutePart( modelRoute.index, 1, routeModel.get( 'versionString' ), true );
+
+                // Clear the parent part of the rouite if its actually the version string.
+                if ( parentName === routeModel.get( 'versionString' ) ) {
+                    parentName = '';
+                }
 
                 // Handle the special case of the 'me' route.
@@ -1138 +1174 @@
                 // If the model has a parent in its route, add that to its class name.
                 if ( '' !== parentName && parentName !== routeName ) {
-                    modelClassName = wp.api.utils.capitalize( parentName ) + wp.api.utils.capitalize( routeName );
+                    modelClassName = wp.api.utils.capitalizeAndCamelCaseDashes( parentName ) + wp.api.utils.capitalizeAndCamelCaseDashes( routeName );
                     modelClassName = mapping.models[ modelClassName ] || modelClassName;
                     loadingObjects.models[ modelClassName ] = wp.api.WPApiBaseModel.extend( {
@@ -1144 +1180 @@
                         // Return a constructed url based on the parent and id.
                         url: function() {
-                            var url = routeModel.get( 'apiRoot' ) + routeModel.get( 'versionString' ) +
-                                    parentName +  '/' +
+                            var url =
+                                routeModel.get( 'apiRoot' ) +
+                                routeModel.get( 'versionString' ) +
+                                parentName +  '/' +
                                     ( ( _.isUndefined( this.get( 'parent' ) ) || 0 === this.get( 'parent' ) ) ?
-                                        this.get( 'parent_post' ) :
-                                        this.get( 'parent' ) ) + '/' +
-                                    routeName;
+                                        ( _.isUndefined( this.get( 'parent_post' ) ) ? '' : this.get( 'parent_post' ) + '/' ) :
+                                        this.get( 'parent' ) + '/' ) +
+                                routeName;
+
                             if ( ! _.isUndefined( this.get( 'id' ) ) ) {
                                 url +=  '/' + this.get( 'id' );
@@ -1165 +1204 @@
                         methods: modelRoute.route.methods,
 
-                        initialize: function() {
+                        initialize: function( attributes, options ) {
+                            wp.api.WPApiBaseModel.prototype.initialize.call( this, attributes, options );
 
                             /**
@@ -1185 +1225 @@
 
                     // This is a model without a parent in its route
-                    modelClassName = wp.api.utils.capitalize( routeName );
+                    modelClassName = wp.api.utils.capitalizeAndCamelCaseDashes( routeName );
                     modelClassName = mapping.models[ modelClassName ] || modelClassName;
                     loadingObjects.models[ modelClassName ] = wp.api.WPApiBaseModel.extend( {
@@ -1213 +1253 @@
 
                 // Add defaults to the new model, pulled form the endpoint.
-                wp.api.utils.decorateFromRoute( modelRoute.route.endpoints, loadingObjects.models[ modelClassName ] );
+                wp.api.utils.decorateFromRoute(
+                    modelRoute.route.endpoints,
+                    loadingObjects.models[ modelClassName ],
+                    routeModel.get( 'versionString' )
+                );
 
             } );
@@ -1227 +1271 @@
                 var collectionClassName, modelClassName,
                         routeName  = collectionRoute.index.slice( collectionRoute.index.lastIndexOf( '/' ) + 1 ),
-                        parentName = wp.api.utils.extractRoutePart( collectionRoute.index, 3 );
+                        parentName = wp.api.utils.extractRoutePart( collectionRoute.index, 1, routeModel.get( 'versionString' ), false );
 
                 // If the collection has a parent in its route, add that to its class name.
-                if ( '' !== parentName && parentName !== routeName ) {
-
-                    collectionClassName = wp.api.utils.capitalize( parentName ) + wp.api.utils.capitalize( routeName );
+                if ( '' !== parentName && parentName !== routeName && routeModel.get( 'versionString' ) !== parentName ) {
+
+                    collectionClassName = wp.api.utils.capitalizeAndCamelCaseDashes( parentName ) + wp.api.utils.capitalizeAndCamelCaseDashes( routeName );
                     modelClassName      = mapping.models[ collectionClassName ] || collectionClassName;
                     collectionClassName = mapping.collections[ collectionClassName ] || collectionClassName;
@@ -1261 +1305 @@
 
                     // This is a collection without a parent in its route.
-                    collectionClassName = wp.api.utils.capitalize( routeName );
+                    collectionClassName = wp.api.utils.capitalizeAndCamelCaseDashes( routeName );
                     modelClassName      = mapping.models[ collectionClassName ] || collectionClassName;
                     collectionClassName = mapping.collections[ collectionClassName ] || collectionClassName;

branches/4.7/tests/qunit/fixtures/wp-api.js

@@ -1 @@
-/* global mockedApiResponse, Backbone */
+/* global mockedApiResponse, Backbone, jsWidgetsEndpointSchema */
 /**
  * @var mockedApiResponse defined in wp-api-generated.js
@@ -24 +24 @@
     'wp-json/wp/v2/taxonomy': mockedApiResponse.TaxonomyModel,
     'wp-json/wp/v2/status': mockedApiResponse.StatusModel,
-    'wp-json/wp/v2/type': mockedApiResponse.TypeModel
+    'wp-json/wp/v2/type': mockedApiResponse.TypeModel,
+    'wp-json/js-widgets/v1/': jsWidgetsEndpointSchema
 };
 

branches/4.7/tests/qunit/index.html

@@ -41 +41 @@
             <script src="fixtures/customize-widgets.js"></script>
             <script src="fixtures/wp-api-generated.js"></script>
+            <script src="fixtures/js-widgets-endpoint.js"></script>
             <script src="fixtures/wp-api.js"></script>
         </div>

branches/4.7/tests/qunit/wp-includes/js/wp-api.js

@@ -193 +193 @@
     } );
 
+// Test the jswidget custom namespace and endpoints.
+wp.api.init( {
+    'versionString': 'js-widgets/v1/'
+} ).done( function() {
+        var customClasses = [
+            'WidgetsArchives',
+            'WidgetsCalendar',
+            'WidgetsCategories',
+            'WidgetsMeta',
+            'WidgetsNav_menu',
+            'WidgetsPages',
+            'WidgetsPostCollection',
+            'WidgetsRecentComments',
+            'WidgetsRecentPosts',
+            'WidgetsRss',
+            'WidgetsSearch',
+            'WidgetsTag_cloud',
+            'WidgetsText'
+        ];
+
+        // Check that we have and can get each model type.
+        _.each( customClasses, function( className ) {
+            QUnit.test( 'Checking ' + className + ' class name.' , function( assert ) {
+                var done = assert.async();
+
+                assert.expect( 2 );
+
+                wp.api.loadPromise.done( function() {
+                    var theModel = new wp.api.models[ className ]();
+                    assert.ok( theModel, 'We can instantiate wp.api.models.' + className );
+                    var theCollection = new wp.api.collections[ className ]();
+                    assert.ok( theCollection, 'We can instantiate wp.api.collections.' + className );
+                    // Trigger Qunit async completion.
+                    done();
+                } );
+            } );
+        } );
+
+    } );
+
 } )( window.QUnit );