Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

ember-cli-inline-content

Package Overview
Dependencies
Maintainers
1
Versions
10
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ember-cli-inline-content

An ember-cli add-on to render inline scripts and styles directly into your index.html file

  • 0.3.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
11K
increased by11.93%
Maintainers
1
Weekly downloads
 
Created
Source

ember-cli-inline-content Build Status

An ember-cli add-on to render inline scripts, styles, or any content directly into your index.html file.

Install

npm install --save-dev ember-cli-inline-content

compatible with ember-cli >= v0.0.47

Usage

In your app's Brocfile.js, define inlineContent options on your app instance

var app = new EmberApp({
  inlineContent: {
    'key1' : 'filepath1.js',
    'key2' : 'filepath2.css',
    'key3' : {
      file: 'filepath4.js',
      attrs: { 'data-foo' : 'bar' }
    },
    'key4' : {
      content: 'foo'
    }
  }
});

Then in your index.html file, use the content-for helper with a references to the keys in your options:

{{content-for 'key1'}}
{{content-for 'key2'}}
{{content-for 'key3'}}
{{content-for 'key4'}}

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 options

  • filepath (String) The path to the content file

or

  • 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

Examples

Enviroment specifc content:

Brocfile.js:

var app = new EmberApp({
  ...
});

if (app.env === 'production') {
  app.options.inlineContent = {
    'some-script' : './some-script.js'
  };
}
Rendering a string of content instead of a file:

Brocfile.js:

var app = new EmberApp({
  inlineContent: {
    'env-heading' : { 
      content: '<h1>Environment: ' + process.env.EMBER_ENV + '</h1>'
    }
  }
});

Output:

<h1>Environment: development</h1>
Adding attributes:

Brocfile.js:

var app = new EmberApp({
  inlineContent: {
    'olark' : { 
      file: './olark.js',
      attrs: { 'data-cfasync' : 'true' }
    }
  }
});

Output:

<script data-cfasync="true">
  ... ./olark.js content here ...
</script>
Post processing:

Brocfile.js:

var googleAnalyticsId = process.env.EMBER_ENV === 'production' ? 'UA-XXXXXXXX-1' : 'UA-XXXXXXXX-2';

var app = new EmberApp({
  inlineContent: {
    'google-analytics' : {
      file: './ga.js',
      postProcess: function(content) {
        return content.replace(/\{\{GOOGLE_ANALYTICS_ID\}\}/g, googleAnalyticsId);
      }
    }
  }
});

ga.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');

ga('create', '{{GOOGLE_ANALYTICS_ID}}', 'auto');

index.html:

{{content-for 'google-analytics'}}

Output:

<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?

  • You want some code to start executing before your whole app downloads
  • You don't want that code to require a separate request
  • <script async> is not widely supported, or incompatible with some 3rd party code
  • Some 3rd party code recommends, or requires you to inline their code
  • You need to place various inline content but want to keep your index.html clean
  • You want minified inline content, but keep full source in separate files for dev and testing

Keywords

FAQs

Package last updated on 09 Nov 2014

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc