Merge pull request #12 from afshin/phosphor-upgrade

Fix completer upgrade.

src/completer/model.ts

@@ -6,7 +6,7 @@ import {
 } from '@phosphor/algorithm';
 
 import {
-  JSONExt, JSONValue
+  JSONExt
 } from '@phosphor/coreutils';
 
 import {
@@ -45,9 +45,12 @@ class CompleterModel implements CompleterWidget.IModel {
     return this._original;
   }
   set original(newValue: CompleterWidget.ITextState) {
-    if (Private.deepEqual(newValue, this._original)) {
+    let unchanged = this._original && newValue &&
+      JSONExt.deepEqual(newValue, this._original);
+    if (unchanged) {
       return;
     }
+
     this._reset();
     this._original = newValue;
     this._stateChanged.emit(void 0);
@@ -60,9 +63,12 @@ class CompleterModel implements CompleterWidget.IModel {
     return this._current;
   }
   set current(newValue: CompleterWidget.ITextState) {
-    if (Private.deepEqual(newValue, this._current)) {
+    let unchanged = this._current && newValue &&
+      JSONExt.deepEqual(newValue, this._current);
+    if (unchanged) {
       return;
     }
+
     // Original request must always be set before a text change. If it isn't
     // the model fails silently.
     if (!this.original) {
@@ -179,7 +185,7 @@ class CompleterModel implements CompleterWidget.IModel {
    */
   setOptions(newValue: IterableOrArrayLike<string>) {
     let values = toArray(newValue || []);
-    if (Private.deepEqual(values, this._options)) {
+    if (JSONExt.deepEqual(values, this._options)) {
       return;
     }
     if (values.length) {
@@ -252,23 +258,22 @@ class CompleterModel implements CompleterWidget.IModel {
     let options = this._options || [];
     let query = this._query;
     if (!query) {
-      return map(options, option => {
-        return { raw: option, child: h.pre({}, option) };
-      });
+      return map(options, option => ({ raw: option, text: option }));
     }
     let results: Private.IMatch[] = [];
     for (let option of options) {
       let match = StringExt.matchSumOfSquares(option, query);
       if (match) {
+        let marked = StringExt.highlight(option, match.indices, Private.mark);
         results.push({
           raw: option,
           score: match.score,
-          child: StringExt.highlight(option, match.indices, h.mark)
+          text: marked.join('')
         });
       }
     }
     return map(results.sort(Private.scoreCmp), result =>
-      ({ child: result.child, raw: result.raw })
+      ({ text: result.text, raw: result.raw })
     );
   }
 
@@ -317,9 +322,17 @@ namespace Private {
     score: number;
 
     /**
-     * The virtual node of a completion match.
+     * The highlighted text of a completion match.
      */
-    child: h.Child;
+    text: string;
+  }
+
+  /**
+   * Mark a highlighted chunk of text.
+   */
+  export
+  function mark(value: string): string {
+    return `<mark>${value}</mark>`;
   }
 
   /**
@@ -337,16 +350,4 @@ namespace Private {
     }
     return a.raw.localeCompare(b.raw);
   }
-
-
-  /**
-   * Compare two objects for JSON equality.
-   */
-  export
-  function deepEqual(a: JSONValue, b: JSONValue): boolean {
-    if (a === void 0 || b === void 0) {
-      return false;
-    }
-    return JSONExt.deepEqual(a, b);
-  }
 }

src/completer/widget.ts

@@ -29,10 +29,6 @@ import {
   Widget
 } from '@phosphor/widgets';
 
-import {
-  VirtualDOM, h
-} from '@phosphor/virtualdom';
-
 import {
   CodeEditor
 } from '../codeeditor';
@@ -639,9 +635,9 @@ namespace CompleterWidget {
   export
   interface IItem {
     /**
-     * The highlighted, marked up virtual node of a visible completer item.
+     * The highlighted, marked up text of a visible completer item.
      */
-    child: h.Child;
+    text: string;
 
     /**
      * The raw text of a visible completer item.
@@ -686,7 +682,15 @@ namespace CompleterWidget {
      * Create an item node for a text completer menu.
      */
     createItemNode(item: IItem): HTMLLIElement {
-      return VirtualDOM.realize(h.li({}, item.child)) as HTMLLIElement;
+      let li = document.createElement('li');
+      let code = document.createElement('code');
+
+      // Use innerHTML because search results include <mark> tags.
+      code.innerHTML = item.text;
+
+      li.className = ITEM_CLASS;
+      li.appendChild(code);
+      return li;
     }
   }