ember-cli-inline-content - npm Package Compare versions

Comparing version 0.2.3 to 0.3.0

index.js

@@ -18,3 +18,3 @@ var fs = require('fs');
   var inlineContentForType = inlineContent && inlineContent[type];
-  var contentOptions, relativeFilePath, filePath, fileContent, ext;
+  var contentOptions, filePath, content;
 
@@ -25,29 +25,38 @@ if(inlineContentForType) {
     if (contentOptions && contentOptions.content) {
-      return contentOptions.content;
+      content = contentOptions.content;
+    } else {
+      filePath = contentOptions && contentOptions.file || inlineContentForType;
+      content = this.readFile(filePath);
     }
 
-    relativeFilePath = contentOptions ? contentOptions.file : inlineContentForType;
-    if (!relativeFilePath) {
-      return console.log(this.name + ' error: file path not defined');
+    if ('function' === typeof contentOptions.postProcess) {
+      content = contentOptions.postProcess(content);
     }
 
-    filePath = path.join(this.project.root, relativeFilePath);
-    try {
-      fileContent = fs.readFileSync(filePath, 'utf8');
-    } catch(e){
-      return console.log(this.name + ' error: file not found: ' + filePath);
+    if (filePath) {
+      switch (path.extname(filePath)) {
+        case '.js':
+          return this.renderScript(content, contentOptions);
+        case '.css':
+          return this.renderStyle(content, contentOptions);
+      }
     }
 
-    ext = path.extname(filePath);
-    switch (ext) {
-      case '.js':
-        return this.renderScript(fileContent, contentOptions);
-      case '.css':
-        return this.renderStyle(fileContent, contentOptions);
-      default:
-        return fileContent;
-    }
+    return content;
   }
 };
 
+InlineContentRenderer.prototype.readFile = function(filePath) {
+  if (!filePath) {
+    return console.log(this.name + ' error: file path not defined');
+  }
+
+  var fullPath = path.join(this.project.root, filePath);
+  try {
+    return fs.readFileSync(fullPath, 'utf8');
+  } catch(e){
+    return console.log(this.name + ' error: file not found: ' + fullPath);
+  }
+};
+
 InlineContentRenderer.prototype.renderContentWithTag = function(content, tag, options) {
@@ -54,0 +63,0 @@ var attrs = options && options.attrs;

package.json

 {
   "name": "ember-cli-inline-content",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "description": "An ember-cli add-on to render inline scripts and styles directly into your index.html file",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "node tests/test-runner.js"
   },
@@ -25,3 +25,6 @@ "repository": {
     "uglify-js": "^2.4.15"
+  },
+  "devDependencies": {
+    "qunit": "^0.7.5"
   }
 }

README.md

@@ -1,4 +0,4 @@
-# ember-cli-inline-content
+# ember-cli-inline-content [![Build Status](https://travis-ci.org/gdub22/ember-cli-inline-content.svg?branch=master)](https://travis-ci.org/gdub22/ember-cli-inline-content)
 
-An ember-cli add-on to render inline scripts and styles directly into your index.html file.
+An ember-cli add-on to render inline scripts, styles, or any content directly into your index.html file.
 
@@ -9,7 +9,7 @@ ## Install
 ```
-**Note:** *compatible with ember-cli >= v0.0.47 (introduced content-for addons)*
+*compatible with ember-cli >= v0.0.47*
 
-## Example
+## Usage
 
-In your app's Brocfile.js, define a manifest of files you want to inline (name : filepath)
+In your app's Brocfile.js, define inlineContent options on your app instance
 
@@ -19,4 +19,11 @@ ```js
   inlineContent: {
-    'google-analytics' : 'ext/google-analytics.js',
-    'fast-style' : 'ext/red.css'
+    'key1' : 'filepath1.js',
+    'key2' : 'filepath2.css',
+    'key3' : {
+      file: 'filepath4.js',
+      attrs: { 'data-foo' : 'bar' }
+    },
+    'key4' : {
+      content: 'foo'
+    }
   }
@@ -26,37 +33,59 @@ });
 
-In your index.html file, use the 'content-for' helper with a reference to the name in the manifest
+Then in your index.html file, use the `content-for` helper with a references to the keys in your options:
 
 ```html
-{{content-for 'fast-style'}}
+{{content-for 'key1'}}
+{{content-for 'key2'}}
+{{content-for 'key3'}}
+{{content-for 'key4'}}
+```
 
-<p>some other stuff</p>
+During the build process, this will render the contents of those files directly inline with `<script>` or `<style>` tags, based on the filetype. In production builds, the contents of the inline blocks will be minified (will obey EmberApp's minifyJS & minifyCSS options in Brocfile.js). You are not restricted to just js/css files.  It will inline the literal contents of any UTF-8 string file.
 
-{{content-for 'google-analytics'}}
-```
+## Content options
+- filepath (String) The path to the content file
 
-During the build preocess, this will render the contents of those files directly inline with `<script>` or `<style>` tags, based on the filetype. In production, the contents of the inline blocks will be minified (will obey application's minifyJS & minifyCSS options in Brocfile).
+or  
 
-The above example will output in index.html:
-```html
-<style>
-  body { color: red; }
-</style>
+- options (Object)
+    - file (String) The path to the content file
+    - content (String) Literal string content instead of loading a file
+    - attrs (Object) Hash of html attributes to add to the generated tags
+    - postProcess (Function) Hook to perform any transformations on the loaded file contents
 
-<p>some other stuff</p>
+## Examples
 
-<script>
-  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+#### Enviroment specifc content:
+Brocfile.js:
+```js
+var app = new EmberApp({
+  ...
+});
 
-  ga('create', 'UA-XXXXXXXX-X', 'auto');
-  ga('send', 'pageview');
-</script>
+if (app.env === 'production') {
+  app.options.inlineContent = {
+    'some-script' : './some-script.js'
+  };
+}
 ```
 
-## Advanced Examples
+#### Rendering a string of content instead of a file:
+Brocfile.js:
+```js
+var app = new EmberApp({
+  inlineContent: {
+    'env-heading' : { 
+      content: '<h1>Environment: ' + process.env.EMBER_ENV + '</h1>'
+    }
+  }
+});
+```
 
-#### Adding attributes to the generated tags:
+Output:
+```html
+<h1>Environment: development</h1>
+```
 
+#### Adding attributes:
+Brocfile.js:
 ```js
@@ -66,3 +95,3 @@ var app = new EmberApp({
     'olark' : { 
-      file: 'ext/olark.js',
+      file: './olark.js',
       attrs: { 'data-cfasync' : 'true' }
@@ -74,30 +103,22 @@ }
 
-Will output:
+Output:
 ```html
 <script data-cfasync="true">
-  ...ext/olark.js content here...
+  ... ./olark.js content here ...
 </script>
 ```
 
-#### Enviroment specifc content:
-In the Brocfile.js
+#### Post processing:
+Brocfile.js:
 ```js
-var app = new EmberApp({
-  ...
-});
+var googleAnalyticsId = process.env.EMBER_ENV === 'production' ? 'UA-XXXXXXXX-1' : 'UA-XXXXXXXX-2';
 
-if (app.env === 'production') {
-  app.options.inlineContent = {
-    'some-script' : 'ext/some-script.js'
-  };
-}
-```
-
-#### Rendering any kind of file:
-You are not restricted to just js/css files.  It will inline the literal contents of any UTF-8 string file.
-
-```js
 var app = new EmberApp({
   inlineContent: {
-    'facebook-html-block' : 'ext/facebook.html'
+    'google-analytics' : {
+      file: './ga.js',
+      postProcess: function(content) {
+        return content.replace(/\{\{GOOGLE_ANALYTICS_ID\}\}/g, googleAnalyticsId);
+      }
+    }
   }
@@ -107,14 +128,29 @@ });
 
-#### Rendering a string of content instead of a file:
+ga.js:
+```js
+(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
 
-```js
-var app = new EmberApp({
-  inlineContent: {
-    'env-heading' : { 
-      content: '<h1>Environment: ' + process.env.EMBER_ENV + '</h1>'
-    }
-  }
-});
+ga('create', '{{GOOGLE_ANALYTICS_ID}}', 'auto');
 ```
 
+index.html:
+```html
+{{content-for 'google-analytics'}}
+```
+
+Output:
+```html
+<script>
+  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+  ga('create', 'UA-XXXXXXXX-1', 'auto');
+</script>
+```
+
+
 ## Why?
@@ -121,0 +157,0 @@ - You want some code to start executing before your whole app downloads

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

11578

increased by82.22%

Number of package files

9

increased by125%

Lines of code

190

increased by179.41%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

158

increased by29.51%

Worsened metrics

Dev dependency count

1

increased byInfinity%

Number of low supply chain risk alerts

2

increased by100%

No dependency changes