@misteroneill fixed internal extends usage and added a deprecation warning. closes #2390

CHANGELOG.md

@@ -73,6 +73,7 @@ CHANGELOG
 * @dmlap use seekable on source handlers when defined ([view](https://github.com/videojs/video.js/pull/2376))
 * @dmlap fire seeking in the flash tech, not the SWF ([view](https://github.com/videojs/video.js/pull/2372))
 * @dmlap expose the xhr helper utility ([view](https://github.com/videojs/video.js/pull/2321))
+* @misteroneill fixed internal extends usage and added a deprecation warning ([view](https://github.com/videojs/video.js/pull/2390))
 
 --------------------
 

docs/guides/components.md

@@ -1,11 +1,11 @@
 Components
 ===
-The Video.js player is built on top of a simple, custom UI components architecture. The player class and all control classes inherit from the Component class, or a subclass of Component.
+The Video.js player is built on top of a simple, custom UI components architecture. The player class and all control classes inherit from the `Component` class, or a subclass of `Component`.
 
 ```js
-videojs.Control = videojs.Component.extend();
-videojs.Button = videojs.Control.extend();
-videojs.PlayToggle = videojs.Button.extend();
+videojs.registerComponent('Control', videojs.extends(Component));
+videojs.registerComponent('Button', videojs.extends(videojs.getComponent('Control')));
+videojs.registerComponent('PlayToggle', videojs.extends(videojs.getComponent('Button')));
 ```
 
 The UI component architecture makes it easier to add child components to a parent component and build up an entire user interface, like the controls for the Video.js player.

src/js/component.js

@@ -585,7 +585,7 @@ class Component {
    * @param  {String|Component} first   The event type or other component
    * @param  {Function|String}      second  The event handler or event type
    * @param  {Function}             third   The event handler
-   * @return {Component} 
+   * @return {Component}
    * @method on
    */
   on(first, second, third) {
@@ -1208,7 +1208,7 @@ class Component {
    * Registers a component
    *
    * @param {String} name Name of the component to register
-   * @param {Object} comp The component to register  
+   * @param {Object} comp The component to register
    * @static
    * @method registerComponent
    */
@@ -1244,12 +1244,16 @@ class Component {
    * Sets up the constructor using the supplied init method
    * or uses the init of the parent object
    *
-   * @param {Object} props An object of properties  
+   * @param {Object} props An object of properties
    * @static
+   * @deprecated
    * @method extend
    */
   static extend(props) {
     props = props || {};
+
+    log.warn('Component.extend({}) has been deprecated, use videojs.extends(Component, {}) instead');
+
     // Set up the constructor using the supplied init method
     // or using the init of the parent object
     // Make sure to check the unobfuscated version for external libs
@@ -1275,8 +1279,6 @@ class Component {
 
     // Make the class extendable
     subObj.extend = Component.extend;
-    // Make a function for creating instances
-    // subObj.create = CoreObject.create;
 
     // Extend subObj's prototype with functions and other properties from props
     for (let name in props) {

test/api/api.js

@@ -228,7 +228,7 @@ test('component can be subclassed externally', function(){
   var Component = videojs.getComponent('Component');
   var ControlBar = videojs.getComponent('ControlBar');
 
-  var player = new (Component.extend({
+  var player = new (videojs.extends(Component, {
     reportUserActivity: function(){},
     textTracks: function(){ return {
         addEventListener: Function.prototype,

test/unit/tech/tech.test.js

@@ -1,5 +1,6 @@
 var noop = function() {}, clock, oldTextTracks;
 
+import extendsFn from '../../../src/js/extends.js';
 import Tech from '../../../src/js/tech/tech.js';
 import { createTimeRange } from '../../../src/js/utils/time-ranges.js';
 
@@ -103,7 +104,7 @@ test('should add the source handler interface to a tech', function(){
   var sourceB = { src: 'no-support', type: 'no-support' };
 
   // Define a new tech class
-  var MyTech = Tech.extend();
+  var MyTech = extendsFn(Tech);
 
   // Extend Tech with source handlers
   Tech.withSourceHandlers(MyTech);
@@ -119,7 +120,7 @@ test('should add the source handler interface to a tech', function(){
   ok(tech.setSource, 'added a setSource function to the tech instance');
 
   // Create an internal state class for the source handler
-  // The internal class would be used by a source hanlder to maintain state
+  // The internal class would be used by a source handler to maintain state
   // and provde a dispose method for the handler.
   // This is optional for source handlers
   var disposeCalled = false;
@@ -179,7 +180,7 @@ test('should add the source handler interface to a tech', function(){
 
 test('should handle unsupported sources with the source handler API', function(){
   // Define a new tech class
-  var MyTech = Tech.extend();
+  var MyTech = extendsFn(Tech);
   // Extend Tech with source handlers
   Tech.withSourceHandlers(MyTech);
   // Create an instance of Tech