chore(): make highlight.js a vendor (#75)

* removed static lib file and added npm dependency for highlight.js + config

* updated docs and README.md

angular-cli-build.js

@@ -13,15 +13,17 @@ module.exports = function(defaults) {
       'hammerjs/*.min.js',
       '@angular/**/*.js',
       '@angular2-material/**/*.+(js|css)',
-      'showdown/dist/showdown.js'
+      'showdown/dist/showdown.js',
+      'highlight.js/lib/**'
     ],
     polyfills: [
       'vendor/core-js/client/core.js',
       'vendor/systemjs/dist/system.src.js',
       'vendor/zone.js/dist/zone.js',
       'vendor/hammerjs/hammer.min.js',
       '@angular2-material/**/*.css',
-      'vendor/showdown/dist/showdown.js'
+      'vendor/showdown/dist/showdown.js',
+      'vendor/highlight.js/lib/**'
     ]
   });
 };

package.json

@@ -82,6 +82,7 @@
     "systemjs": "0.19.31",
     "zone.js": "0.6.21",
     "hammerjs": "^2.0.8",
+    "highlight.js": "9.6.0",
     "showdown": "1.4.2"
   },
   "devDependencies": {

src/app/components/components/highlight/highlight.component.html

@@ -65,7 +65,36 @@ <h1>hello world!</h1>
       ]]>
     </td-highlight>
     <h3>Setup:</h3>
-    <p>Import the [CovalentHighlightModule] using the forRoot() method in your NgModule:</p>
+    <p><code>highlight.js</code> needs to be added as vendor (installed as a <code>highlight.js</code> dependency).</p>
+    <td-highlight lang="typescript">
+      <![CDATA[
+        module.exports = function(defaults) {
+          return new Angular2App(defaults, {
+            vendorNpmFiles: [
+              ...
+              'highlight.js/lib/**'
+            ]
+          });
+        };
+      ]]>
+    </td-highlight>
+    <p>Reference the module in the <code>system-config.js</code> file.</p>
+    <td-highlight lang="html">
+      <![CDATA[
+        const barrels: string[] = [
+          'highlight.js/lib',
+        ];
+        System.config({
+          map: {
+            ...
+            'highlight.js/lib': 'vendor/highlight.js/lib',
+            ...
+          },
+          packages: cliSystemConfigPackages,
+        });
+      ]]>
+    </td-highlight>
+    <p>Then, import the [CovalentHighlightModule] using the forRoot() method in your NgModule:</p>
     <td-highlight lang="typescript">
       <![CDATA[
         import { CovalentHighlightModule } from '@covalent/highlight';

src/platform/highlight/README.md

@@ -12,9 +12,43 @@ Properties:
 | --- | --- | --- |
 | `lang` | `"typescript"|"html"|"css"|[any common language supported in highlightjs]` | The language of the code thats inside the component.
 
+## Installation
+
+This component can be installed as npm package and can be included by importing from `@covalent/highlight`.
+
 ## Setup
 
-Import the [CovalentHighlightModule] using the forRoot() method in your NgModule:
+`highlight.js` needs to be added as vendor (installed as a `highlight.js` dependency).
+
+```typescript
+module.exports = function(defaults) {
+  return new Angular2App(defaults, {
+    vendorNpmFiles: [
+      ...
+      'highlight.js/lib/**'
+    ]
+  });
+};
+```
+Reference the module in the `system-config.js` file.
+
+```typescript
+  <![CDATA[
+    const barrels: string[] = [
+      'highlight.js/lib',
+    ];
+    System.config({
+      map: {
+        ...
+        'highlight.js/lib': 'vendor/highlight.js/lib',
+        ...
+      },
+      packages: cliSystemConfigPackages,
+    });
+  ]]>
+```
+
+Then, import the [CovalentHighlightModule] using the forRoot() method in your NgModule:
 
 ```typescript
 import { CovalentHighlightModule } from '@covalent/highlight';
@@ -31,8 +65,8 @@ export class MyModule {}
 ## Usage
 
 Simply wrap your code snippets in `<td-highlight>`. To use HTML brackets `<` and `>` wrap the code with `<![CDATA[` and `]]>;` or replace with HTMLs character entities `&lt;` and `&gt;`. 
-Also, to display model binding, add spaces between curly braces like: `{{'{'}} {{'{'}} } }` and wrap them  with `<![CDATA[` and `]]>;`
-  
+Also, to display model binding, add spaces between curly braces like: `{ { } }` and wrap them  with `<![CDATA[` and `]]>;`
+
 Example for HTML usage:
 
  ```html

src/platform/highlight/highlight.component.ts

@@ -1,5 +1,5 @@
 import { Component, AfterViewInit, ViewChild, ElementRef, Input, Renderer } from '@angular/core';
-import './highlight.pack.js';
+import 'highlight.js/lib';
 
 declare var hljs: any;
 

src/platform/highlight/package.json

@@ -32,6 +32,7 @@
     "Jeremy Wilken <[email protected]>"
   ],
   "dependencies": {
-    "@covalent/core": "0.6.0"
+    "@covalent/core": "0.6.0",
+    "highlight.js": "9.6.0"
   }
 }

src/system-config.ts

@@ -41,6 +41,7 @@ const angularPackages: any = {
 const barrels: string[] = [
   // Thirdparty barrels.
   'rxjs',
+  'highlight.js/lib',
 
   // Library specific barrels.
   'platform/core',
@@ -105,6 +106,7 @@ System.config({
   map: {
     '@angular': 'vendor/@angular',
     'rxjs': 'vendor/rxjs',
+    'highlight.js/lib': 'vendor/highlight.js/lib',
     'main': 'main.js',
     '@angular2-material': 'vendor/@angular2-material',
   },