Merge pull request #264 from mixonic/avoid-reparse

Avoid reparse after initial render
bustle · Dec 14, 2015 · 69e7394 · 69e7394
2 parents 3b00baf + eeca363
commit 69e7394
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 21 deletions.
diff --git a/src/js/editor/editor.js b/src/js/editor/editor.js
@@ -89,6 +89,10 @@ class Editor {
     DEFAULT_TEXT_EXPANSIONS.forEach(e => this.registerExpansion(e));
     DEFAULT_KEY_COMMANDS.forEach(kc => this.registerKeyCommand(kc));
 
+    this._mutationObserver = new MutationObserver(() => {
+      this.handleInput();
+    });
+    this._isMutationObserved = false;
     this._parser   = new DOMParser(this.builder);
     this._renderer = new Renderer(this, this.cards, this.unknownCardHandler, this.cardOptions);
 
@@ -136,7 +140,9 @@ class Editor {
     }
 
     this.runCallbacks(CALLBACK_QUEUES.WILL_RENDER);
+    this.removeMutationObserver();
     this._renderer.render(this._renderTree);
+    this.ensureMutationObserver();
     this.runCallbacks(CALLBACK_QUEUES.DID_RENDER);
   }
 
@@ -145,18 +151,18 @@ class Editor {
       throw new Error('Cannot render an editor twice. Use `rerender` to update the rendering of an existing editor instance');
     }
 
-    this.element = element;
 
-    addClassName(this.element, EDITOR_ELEMENT_CLASS_NAME);
+    addClassName(element, EDITOR_ELEMENT_CLASS_NAME);
     element.spellcheck = this.spellcheck;
 
+    clearChildNodes(element);
+
+    this.element = element;
+
     if (this.isEditable === null) {
       this.enableEditing();
     }
 
-    clearChildNodes(element);
-
-    this._setupListeners();
     this._addTooltip();
 
     // A call to `run` will trigger the didUpdatePostCallbacks hooks with a
@@ -167,6 +173,8 @@ class Editor {
     if (this.autofocus) {
       this.element.focus();
     }
+
+    this._setupListeners();
   }
 
   _addTooltip() {
@@ -409,11 +417,28 @@ class Editor {
     this._views = [];
   }
 
+  ensureMutationObserver() {
+    if (!this._isMutationObserved) {
+      this._mutationObserver.observe(this.element, {
+        characterData: true,
+        childList: true,
+        subtree: true
+      });
+      this._isMutationObserved = true;
+    }
+  }
+
+  removeMutationObserver() {
+    if (this._isMutationObserved) {
+      this._mutationObserver.disconnect();
+      this._isMutationObserved = false;
+    }
+  }
+
   destroy() {
     this._isDestroyed = true;
-    if (this.mutationObserver) {
-      this.mutationObserver.disconnect();
-    }
+    this.removeMutationObserver();
+    this._mutationObserver = null;
     this.removeAllEventListeners();
     this.removeAllViews();
     this._renderer.destroy();
@@ -549,15 +574,6 @@ class Editor {
   }
 
   _setupListeners() {
-    this.mutationObserver = new MutationObserver(() => {
-      this.handleInput();
-    });
-    this.mutationObserver.observe(this.element, {
-      characterData: true,
-      childList: true,
-      subtree: true
-    });
-
     ELEMENT_EVENTS.forEach(eventName => {
       this.addEventListener(this.element, eventName,
         (...args) => this.handleEvent(eventName, ...args)

diff --git a/src/js/utils/compiler.js b/src/js/utils/compiler.js
@@ -1,3 +1,5 @@
+import { forEach } from './array-utils';
+
 export function visit(visitor, node, opcodes) {
   const method = node.type;
   if (!visitor[method]) {
@@ -9,10 +11,15 @@ export function visit(visitor, node, opcodes) {
 export function compile(compiler, opcodes) {
   for (var i=0, l=opcodes.length; i<l; i++) {
     let [method, ...params] = opcodes[i];
-    if (params.length) {
-      compiler[method].apply(compiler, params);
-    } else {
+    let length = params.length;
+    if (length === 0) {
       compiler[method].call(compiler);
+    } else if (length === 1) {
+      compiler[method].call(compiler, params[0]);
+    } else if (length === 2) {
+      compiler[method].call(compiler, params[0], params[1]);
+    } else {
+      compiler[method].apply(compiler, params);
     }
   }
 }
@@ -21,7 +28,7 @@ export function visitArray(visitor, nodes, opcodes) {
   if (!nodes || nodes.length === 0) {
     return;
   }
-  nodes.forEach(node => {
+  forEach(nodes, node => {
     visit(visitor, node, opcodes);
   });
 }