ember-cli-inline-content
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
Usage
In your app's ember-cli-build.js, define inlineContent options on your app instance
var app = defaults inlineContent: 'key1' : 'filepath1.js' 'key2' : 'filepath2.css' 'key3' : file: 'filepath3.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. You are not restricted to just js/css files. It will inline the literal contents of any UTF-8 string file. If you would like to minify the inlined-content, see ember-cli-html-minifier
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
- enabled (Boolean) explicitly enable/disable inlining this content
- 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 specific content:
ember-cli-build.js:
var app = defaults ...; if appenv === 'production' appoptionsinlineContent = 'some-script' : './some-script.js' ;
Rendering a string of content instead of a file:
ember-cli-build.js:
var app = defaults inlineContent: 'env-heading' : content: '<h1>Environment: ' + processenvEMBER_ENV + '</h1>' ;
Output:
Environment: development
Adding attributes:
ember-cli-build.js:
var app = defaults inlineContent: 'olark' : file: './olark.js' attrs: 'data-cfasync' : true ;
Output:
Post processing:
ember-cli-build.js:
var env = processenvEMBER_ENV;var config = env; var app = defaults inlineContent: 'google-analytics' : file: './ga.js' { return content; } ;
environment.js
ENVgoogleAnalyticsId = environment === 'production' ? 'UA-XXXXXXXX-1' : 'UA-XXXXXXXX-2';
ga.js:
{i'GoogleAnalyticsObject'=r;ir=ir||{irq=irq||}irl=1*;a=sm=s0;aasync=1;asrc=g;mparentNode}windowdocument'script''//www.google-analytics.com/analytics.js''ga'; ;
index.html:
{{content-for 'google-analytics'}}
Output:
Explicitly enable/disable:
ember-cli-build.js:
var app = defaults inlineContent: 'analytics' : file: './analytics.js' enabled: processenvEMBER_ENV === 'production' ;
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