From 60d94df67145da61c4e1eb281116e5d3493dce95 Mon Sep 17 00:00:00 2001
From: 43081j <43081j@users.noreply.github.com>
Date: Wed, 5 Oct 2016 22:25:11 +0100
Subject: [PATCH 1/4] add data-binding functionality & expose highlight

Fixes #24 by exposing the highlighter functionality to data-binding and
programatic use.

Also now checks that the host exists before dealing with event listeners.
---
 prism-highlighter.html  | 46 +++++++++++++++++++++++++++++++++++++----
 test/prism-element.html | 37 +++++++++++++++++++++++++++++++++
 2 files changed, 79 insertions(+), 4 deletions(-)

diff --git a/prism-highlighter.html b/prism-highlighter.html
index 0458466..9b4f33c 100644
--- a/prism-highlighter.html
+++ b/prism-highlighter.html
@@ -38,16 +38,54 @@
 
     is: 'prism-highlighter',
 
+    properties: {
+      code: {
+        type: String
+      },
+      lang: {
+        type: String,
+        value: null
+      },
+      highlighted: {
+        type: String,
+        computed: '_computeHighlighted(code, lang)'
+      }
+    },
+
     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 +102,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) {
diff --git a/test/prism-element.html b/test/prism-element.html
index 98bd0db..ceceeed 100644
--- a/test/prism-element.html
+++ b/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>

From ffa4c904e3e87f94714e827e243e2acaff80bf84 Mon Sep 17 00:00:00 2001
From: 43081j <43081j@users.noreply.github.com>
Date: Wed, 5 Oct 2016 22:30:04 +0100
Subject: [PATCH 2/4] notify of highlighted changes

---
 prism-highlighter.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/prism-highlighter.html b/prism-highlighter.html
index 9b4f33c..c2bb5e4 100644
--- a/prism-highlighter.html
+++ b/prism-highlighter.html
@@ -48,7 +48,8 @@
       },
       highlighted: {
         type: String,
-        computed: '_computeHighlighted(code, lang)'
+        computed: '_computeHighlighted(code, lang)',
+        notify: true
       }
     },
 

From b0be372ee6f36d484da276aa26057d015568b1e5 Mon Sep 17 00:00:00 2001
From: 43081j <43081j@users.noreply.github.com>
Date: Wed, 5 Oct 2016 22:35:06 +0100
Subject: [PATCH 3/4] document data binding options

---
 prism-highlighter.html | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/prism-highlighter.html b/prism-highlighter.html
index c2bb5e4..59a39de 100644
--- a/prism-highlighter.html
+++ b/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-element code="{{source}}" highlighted="{{result}}"></prism-element>
+```
+
 @element prism-highlighter
 @demo demo/index.html
 -->
@@ -39,17 +45,27 @@
     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
+        notify: true,
+        readOnly: true
       }
     },
 

From 607ad58a08975429c61ad23e2ff7f76dd3e48423 Mon Sep 17 00:00:00 2001
From: 43081j <43081j@users.noreply.github.com>
Date: Wed, 5 Oct 2016 22:36:12 +0100
Subject: [PATCH 4/4] fix docs typo on element name

---
 prism-highlighter.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/prism-highlighter.html b/prism-highlighter.html
index 59a39de..aeb1664 100644
--- a/prism-highlighter.html
+++ b/prism-highlighter.html
@@ -27,7 +27,7 @@
 You may also use this element with data-binding like so:
 
 ```html
-<prism-element code="{{source}}" highlighted="{{result}}"></prism-element>
+<prism-highlighter code="{{source}}" highlighted="{{result}}"></prism-highlighter>
 ```
 
 @element prism-highlighter