From 01c07f3c37f92c98ed4b229c2e57fa92066c7335 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Wed, 26 Dec 2018 23:59:49 +0100
Subject: [PATCH] Don't trigger component hooks for temporary components

---
 docs/modules/Components.md                | 25 ++++++++++++++---------
 src/dom_components/model/Component.js     | 20 ++++++++++--------
 src/dom_components/view/ComponentView.js  | 13 ++++++++----
 src/dom_components/view/ComponentsView.js |  5 +++--
 4 files changed, 39 insertions(+), 24 deletions(-)

diff --git a/docs/modules/Components.md b/docs/modules/Components.md
index 64c621455..4025240cd 100644
--- a/docs/modules/Components.md
+++ b/docs/modules/Components.md
@@ -10,15 +10,20 @@ The Component is the base element for template composition. It is atomic, so ele
 
 
 ## Built-in components
-* Default (Basic)
-* Text
-* Image
-* Video
-* Link
-* Map
-* Table
-* Row (for the table)
-* Cell (for the table)
+* default (Basic)
+* wrapper
+* text
+* textnode
+* svg
+* script
+* image
+* video
+* label
+* link
+* map
+* table
+* row (for the table)
+* cell (for the table)
 
 
 
@@ -317,7 +322,7 @@ comps.addType('map', {
 });
 ```
 
-## Component Lifecycle Hooks
+## Lifecycle Hooks
 
 Each component triggers different lifecycle hooks, which allows you to add custom actions at their specific stages.
 We can distinguish 2 different types of hooks: **global** and **local**.
diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js
index 068e8fb20..03cb3b082 100644
--- a/src/dom_components/model/Component.js
+++ b/src/dom_components/model/Component.js
@@ -190,8 +190,11 @@ const Component = Backbone.Model.extend(Styleable).extend(
           this.emitUpdate(name, ...args)
         );
       });
-      this.init();
-      em && em.trigger('component:create', this);
+
+      if (!opt.temporary) {
+        this.init();
+        em && em.trigger('component:create', this);
+      }
     },
 
     /**
@@ -959,12 +962,13 @@ const Component = Backbone.Model.extend(Styleable).extend(
     emitUpdate(property, ...args) {
       const em = this.em;
       const event = 'component:update' + (property ? `:${property}` : '');
-      this.updated(
-        property,
-        property && this.get(property),
-        property && this.previous(property),
-        ...args
-      );
+      property &&
+        this.updated(
+          property,
+          property && this.get(property),
+          property && this.previous(property),
+          ...args
+        );
       this.trigger(event, ...args);
       em && em.trigger(event, this, ...args);
     },
diff --git a/src/dom_components/view/ComponentView.js b/src/dom_components/view/ComponentView.js
index efd76bcbf..74f19e932 100644
--- a/src/dom_components/view/ComponentView.js
+++ b/src/dom_components/view/ComponentView.js
@@ -18,7 +18,9 @@ module.exports = Backbone.View.extend({
     const model = this.model;
     const config = opt.config || {};
     const em = config.em;
+    const modelOpt = model.opt || {};
     this.opts = opt;
+    this.modelOpt = modelOpt;
     this.config = config;
     this.em = em || '';
     this.pfx = config.stylePrefix || '';
@@ -39,7 +41,7 @@ module.exports = Backbone.View.extend({
     model.view = this;
     this.initClasses();
     this.initComponents({ avoidRender: 1 });
-    this.init();
+    !modelOpt.temporary && this.init();
   },
 
   /**
@@ -361,9 +363,12 @@ module.exports = Backbone.View.extend({
   },
 
   postRender() {
-    const { em, model } = this;
-    this.onRender();
-    em && em.trigger('component:mount', model);
+    const { em, model, modelOpt } = this;
+
+    if (!modelOpt.temporary) {
+      this.onRender();
+      em && em.trigger('component:mount', model);
+    }
   },
 
   onRender() {}
diff --git a/src/dom_components/view/ComponentsView.js b/src/dom_components/view/ComponentsView.js
index 5a7fa0baa..e33d93c6f 100644
--- a/src/dom_components/view/ComponentsView.js
+++ b/src/dom_components/view/ComponentsView.js
@@ -14,18 +14,19 @@ module.exports = Backbone.View.extend({
   removeChildren(removed) {
     const em = this.config.em;
     const view = removed.view;
+    const temp = removed.opt.temporary;
     if (!view) return;
     view.remove.apply(view);
     const children = view.childrenView;
     children && children.stopListening();
     removed.components().forEach(this.removeChildren.bind(this));
-    removed.removed();
+    !temp && removed.removed();
     if (em) {
       removed.get('style-signature') &&
         em
           .get('Commands')
           .run('core:component-style-clear', { target: removed });
-      em.trigger('component:remove', removed);
+      !temp && em.trigger('component:remove', removed);
     }
   },