Pass Typed.js through Dependency Injection

Author: davidecaruso

README.md

@@ -30,7 +30,7 @@ For each **Shell** instance you can set the following options:
 | style         | `'custom'`|`'ubuntu'`|`'osx'`|`'windows'`  | The operating system (default: `'custom'`)                             |
 | theme         | `'dark'`|`'light'`                                   | The theme (default: `'dark'`)                                          |
 | responsive    | `false`|`true`                                       | If `true` the terminal will be fluid (default: `false`)                |
-| typed         | `false`|`true`                                       | Adds the **[Typed.js][typedjs]** integration (default: `false`)     |
+| typed         | `false`|*Typed instance*                                       | Adds the **[Typed.js][typedjs]** integration (default: `false`)     |
 | commands      | array                                                     | The commands list (default: `[]`)                                      |
 
 

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "shell.js",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "A JavaScript and CSS library to create terminals",
   "author": "Davide Caruso <davide.caruso93@gmail.com>",
   "license": "MIT",

demo/index.html

@@ -7,10 +7,10 @@
   <script src="../lib/shell.min.js"></script>
   <script>
     document.addEventListener('DOMContentLoaded', function() {
-      let a = new Shell('#awesome-shell', {
+      let shell = new Shell('#awesome-shell', {
         style: 'osx',
         commands: ['sudo -i'],
-        typed: true
+        typed: Typed
       });
     });
   </script>

lib/shell.js

@@ -1,6 +1,6 @@
 {
   "name": "shell.js",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "A JavaScript and CSS library to create terminals",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

lib/shell.js.map

@@ -31,7 +31,7 @@ const defaults = {
   theme: 'dark',
 
   /**
-   * @property {string} theme Adds the Typed.js integration
+   * @property {(boolean|function)} theme Adds the Typed.js integration
    */
   typed: false,
 

lib/shell.min.js

@@ -57,8 +57,8 @@ module.exports = class Shell {
       this.el[0].innerHTML = this.buildStatusBar() + this.buildContent();
 
       /// Typed.js integration
-      if (this.options.typed && typeof Typed !== 'undefined') {
-
+      if (this.options.typed && typeof this.options.typed === 'function') {
+        let Typed = this.options.typed;
         let commandsNum = this.el[0].querySelectorAll('.line').length;
         let initCommands = (i) => {
 

lib/shell.min.js.map

@@ -27,8 +27,7 @@ let plugins = [
         autoprefixer(),
       ]
     }
-  }),
-  new webpack.BannerPlugin(banner),
+  })
 ];
 
 /// If is build environment
@@ -38,11 +37,17 @@ if (env === 'build') {
     sourceMap: true,
     mangle:    {
       except: ['Shell']
+    },
+    output: {
+      comments: false
     }
   }));
   outputFilename = `${filename}.min.js`;
 }
 
+/// Add banner
+plugins.push(new webpack.BannerPlugin(banner));
+
 /// Export Webpack config
 module.exports = {
   devtool: 'nosources-source-map',