feat: do not include vendor hightlight in code-sample

BREAKING CHANGE: hightlight.js should be imported by the host app fixes #15
kcmr · Dec 23, 2019 · 848f029 · 848f029
1 parent 0f12cd7
commit 848f029
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/code-sample.js b/code-sample.js
@@ -1,7 +1,6 @@
 import {PolymerElement, html} from '@polymer/polymer/polymer-element.js';
 import {FlattenedNodesObserver} from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
 import {oneDark} from './themes/one-dark.js';
-import './vendor/highlight/highlight.pack.js';
 
 /**
  * `<code-sample>` uses [highlight.js](https://highlightjs.org/) for syntax highlighting.
@@ -183,7 +182,12 @@ class CodeSample extends PolymerElement {
     if (this.type) this._code.classList.add(this.type);
     this._code.innerHTML = this._entitize(this._cleanIndentation(str));
     this.$.code.appendChild(this._code);
-    hljs.highlightBlock(this._code);
+
+    if (window.hljs) {
+      hljs.highlightBlock(this._code);
+    } else {
+      console.error('hljs not available in window');
+    }
   }
 
   _cleanIndentation(str) {

diff --git a/demo/index.html b/demo/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
     <title>code-sample demo</title>
     <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
+    <script src="../vendor/highlight/highlight.pack.js"></script>
     <script type="module" src="../themes/one-dark.js"></script>
     <script type="module" src="../code-sample.js"></script>
     <script type="module" src="./demo.js"></script>

diff --git a/src/code-sample.js b/src/code-sample.js
@@ -1,7 +1,6 @@
 import {PolymerElement, html} from '@polymer/polymer/polymer-element.js';
 import {FlattenedNodesObserver} from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
 import {oneDark} from './themes/one-dark.js';
-import './vendor/highlight/highlight.pack.js';
 
 /**
  * `<code-sample>` uses [highlight.js](https://highlightjs.org/) for syntax highlighting.
@@ -124,7 +123,12 @@ class CodeSample extends PolymerElement {
     if (this.type) this._code.classList.add(this.type);
     this._code.innerHTML = this._entitize(this._cleanIndentation(str));
     this.$.code.appendChild(this._code);
-    hljs.highlightBlock(this._code);
+
+    if (window.hljs) {
+      hljs.highlightBlock(this._code);
+    } else {
+      console.error('hljs not available in window');
+    }
   }
 
   _cleanIndentation(str) {