Improve isComponent defintion in addType

docs/modules/Components.md

@@ -282,7 +282,7 @@ comps.addType('map', {
     ...
   }, {
     isComponent(el) {
-      // ... new logic for isComponent
+      // ... usually, you'd reuse the same logic
     },
   }),
   // Even if I do nothing in view, I have to specify it
@@ -291,14 +291,14 @@ comps.addType('map', {
 ```
 **After**
 
-The `map` type is already defined, so it will be used as a base for the model and view
+The `map` type is already defined, so it will be used as a base for the model and view.
+We can skip `isComponent` if the recognition logic is the same of the extended component.
 ```js
 comps.addType('map', {
-  isComponent(el) { ... } // ... new logic for isComponent
   model: { ... },
 });
 ```
-Extend the model and view with some other, already defined, components.
+Extend the `model` and `view` with some other, already defined, components.
 ```js
 comps.addType('map', {
   extend: 'other-defined-component',

src/dom_components/index.js

@@ -547,7 +547,10 @@ module.exports = () => {
             }
           },
           {
-            isComponent: isComponent || (() => 0)
+            isComponent:
+              compType && !extendType && !isComponent
+                ? modelToExt.isComponent
+                : isComponent || (() => 0)
           }
         );
       }

test/specs/dom_components/index.js

@@ -208,11 +208,10 @@ describe('DOM Components', () => {
 
     test('Extend component type with custom model and view', () => {
       obj = em.get('DomComponents');
-      const id = 'text';
+      const id = 'image';
       const testProp = 'testValue';
-      const testText = 'Some text';
       const initialTypes = obj.getTypes().length;
-      obj.addType('text', {
+      obj.addType(id, {
         model: {
           defaults: {
             testProp
@@ -225,26 +224,47 @@ describe('DOM Components', () => {
         }
       });
       expect(obj.getTypes().length).toBe(initialTypes);
-      obj.addComponent(`<div>${testText}</div>`);
+      obj.addComponent(`<img src="##"/>`);
       const comp = obj.getComponents().at(0);
       expect(comp.get('type')).toBe(id);
       expect(comp.get('testProp')).toBe(testProp);
-      expect(comp.get('editable')).toBe(true);
+      expect(comp.get('editable')).toBe(1);
+    });
+
+    test('Add new component type by extending another one, without isComponent', () => {
+      obj = em.get('DomComponents');
+      const id = 'test-type';
+      const testProp = 'testValue';
+      obj.addType(id, {
+        extend: 'image',
+        model: {
+          defaults: {
+            testProp
+          }
+        }
+      });
+      obj.addComponent(`<img src="##"/>`);
+      expect(obj.getTypes()[0].id).toEqual(id);
+      const comp = obj.getComponents().at(0);
+      // I'm not specifying the isComponent
+      expect(comp.get('type')).toBe('image');
+      expect(comp.get('editable')).toBe(1);
+      expect(comp.get('testProp')).toBeFalsy();
     });
 
-    test('Add new component type by extending another one', () => {
+    test('Add new component type by extending another one, with custom isComponent', () => {
       obj = em.get('DomComponents');
       const id = 'test-type';
       const testProp = 'testValue';
       obj.addType(id, {
-        extend: 'text',
+        extend: 'image',
         isComponent: el => el.getAttribute('test-prop') === testProp
       });
-      obj.addComponent(`<div test-prop="${testProp}"></div>`);
+      obj.addComponent(`<img src="##" test-prop="${testProp}"/>`);
       expect(obj.getTypes()[0].id).toEqual(id);
       const comp = obj.getComponents().at(0);
       expect(comp.get('type')).toBe(id);
-      expect(comp.get('editable')).toBe(true);
+      expect(comp.get('editable')).toBe(1);
     });
   });