Add data binding

prism-highlighter.html

@@ -24,6 +24,12 @@
 
 This flow is supported by [`<marked-element>`](https://github.com/PolymerElements/marked-element).
 
+You may also use this element with data-binding like so:
+
+```html
+<prism-highlighter code="{{source}}" highlighted="{{result}}"></prism-highlighter>
+```
+
 @element prism-highlighter
 @demo demo/index.html
 -->
@@ -38,16 +44,65 @@
 
     is: 'prism-highlighter',
 
+    properties: {
+      /**
+       * The source to be highlighted
+       */
+      code: {
+        type: String
+      },
+      /**
+       * An optional language hint, such as `js`
+       */
+      lang: {
+        type: String,
+        value: null
+      },
+      /**
+       * The highlighted source code
+       */
+      highlighted: {
+        type: String,
+        computed: '_computeHighlighted(code, lang)',
+        notify: true,
+        readOnly: true
+      }
+    },
+
     ready: function() {
       this._handler = this._highlight.bind(this);
     },
 
     attached: function() {
-      (this.parentElement || this.parentNode.host).addEventListener(HIGHLIGHT_EVENT, this._handler);
+      var host = this.parentElement || (this.parentNode && this.parentNode.host);
+      if(host) {
+        host.addEventListener(HIGHLIGHT_EVENT, this._handler);
+      }
     },
 
     detached: function() {
-      (this.parentElement || this.parentNode.host).removeEventListener(HIGHLIGHT_EVENT, this._handler);
+      var host = this.parentElement || (this.parentNode && this.parentNode.host);
+      if(host) {
+        host.removeEventListener(HIGHLIGHT_EVENT, this._handler);
+      }
+    },
+
+    /**
+     * Highlight the given code with an
+     * optional language hint specified.
+     *
+     * @param {string} code The source being highlighted
+     * @param {string=} lang A language hint (e.g. "js").
+     */
+    highlight: function(code, lang) {
+      return Prism.highlight(code, this._detectLang(code, lang));
+    },
+
+    _computeHighlighted: function(code, lang) {
+      if(!code) {
+        return;
+      }
+      return this.highlight(code, lang);
     },
 
     /**
@@ -64,14 +119,14 @@
       event.stopPropagation();
 
       var detail = event.detail;
-      detail.code = Prism.highlight(detail.code, this._detectLang(detail.code, detail.lang));
+      detail.code = this.highlight(detail.code, detail.lang);
     },
 
     /**
      * Picks a Prism formatter based on the `lang` hint and `code`.
      *
      * @param {string} code The source being highlighted.
-     * @param {string=} lang A language hint (e.g. ````LANG`).
+     * @param {string=} lang A language hint (e.g. "js").
      * @return {!prism.Lang}
      */
     _detectLang: function(code, lang) {

test/prism-element.html

@@ -38,6 +38,12 @@
       </template>
     </test-fixture>
 
+    <test-fixture id="simple-binding">
+      <template>
+        <prism-highlighter></prism-highlighter>
+      </template>
+    </test-fixture>
+
     <script>
       suite('<prism-highlighter>', function() {
           var el;
@@ -63,6 +69,15 @@
               .to.equal(true);
           });
 
+          test('highlights on highlight call', function() {
+            var el = fixture('simple-binding');
+
+            el.highlight('<foo>', 'markup');
+
+            expect(Prism.highlight.calledWithExactly('<foo>', Prism.languages.markup))
+              .to.equal(true);
+          });
+
           test('warns on invalid syntax-highlight event', function() {
               var ev;
 
@@ -154,6 +169,28 @@
                   .to.equal(true);
               });
           });
+
+          suite('can be used via data-binding', function() {
+              setup(function() {
+                el = fixture('simple-binding');
+              });
+
+              test('highlights given code', function() {
+                expect(el.highlighted).to.equal(undefined);
+                el.code = 'return;';
+                expect(Prism.highlight.calledWithExactly('return;', Prism.languages.javascript))
+                  .to.equal(true);
+              });
+
+              test('highlights only when code is set', function() {
+                expect(el.highlighted).to.equal(undefined);
+                el.code = null;
+                expect(el.highlighted).to.equal(undefined);
+                expect(Prism.highlight.callCount).to.equal(0);
+                el.code = 'return;';
+                expect(Prism.highlight.callCount).to.equal(1);
+              });
+          });
       });
     </script>
   </body>