diff --git a/README.md b/README.md index 42220b1..6b90f44 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,17 @@ Inject fingerprinted assetMap.json file into your app and provide initializer, service, and helper to dynamically reference fingerprinted assets. +**When to use this addon?** + +1. If you have dynamic asset file names returned from API and/or you build paths based on several properties. +1. If you can't put your asset filemames into css or to have path as static in your .js files. +1. If you build your image/asset paths in a dynamic way, eg. +```js +imagePath: computed(function() { + return this.get('assetMap').resolve(`${this.get('image')}.png`); +}) +``` + ## Installation ```bash @@ -21,7 +32,8 @@ module.exports = function(environment) { var ENV = { ... ifa: { - enabled: true + enabled: true, + inline: false, } ... }; @@ -83,3 +95,28 @@ var app = new EmberApp(defaults, { ``` `/blog` will be prepended to the assetMap file path in the index.html. + + +### inline option + +If `inline: true` is specified in config, contents of assetMap file will be inline into index.html. + +```html + + +... +``` + +This might save one request to assetMap.json, but will increase overall size of `index.html` file, so use carefully. diff --git a/addon/initializers/asset-map.js b/addon/initializers/asset-map.js index e6059db..a45bfe4 100644 --- a/addon/initializers/asset-map.js +++ b/addon/initializers/asset-map.js @@ -1,36 +1,46 @@ -/* global window, __assetMapFilename__ */ +/* global window, __assetMapPlaceholder__ */ import RSVP from 'rsvp'; import $ from 'jquery'; import AssetMap from '../services/asset-map'; export function initialize(app) { - app.deferReadiness(); + let config = app.__container__.lookupFactory('config:environment'); - let assetMapFile = window && window.__assetMapFilename__; + let assetMapFile = window && window.__assetMapPlaceholder__; if (!assetMapFile) { app.register('service:asset-map', AssetMap); - app.advanceReadiness(); return; } - const promise = new RSVP.Promise((resolve, reject) => { - $.getJSON(assetMapFile, resolve).fail(reject); - }); - - promise.then((map = {}) => { + if (config.ifa.inline) { AssetMap.reopen({ - map: map.assets, - prepend: map.prepend, + map: assetMapFile.assets, + prepend: assetMapFile.prepend, enabled: true }); - }).then(() => { app.register('service:asset-map', AssetMap); - app.advanceReadiness(); - }); + } else { + app.deferReadiness(); + + const promise = new RSVP.Promise((resolve, reject) => { + $.getJSON(assetMapFile, resolve).fail(reject); + }); + + promise.then((map = {}) => { + AssetMap.reopen({ + map: map.assets, + prepend: map.prepend, + enabled: true + }); + }).then(() => { + app.register('service:asset-map', AssetMap); + app.advanceReadiness(); + }); + } } export default { name: 'asset-map', - initialize: initialize + initialize }; diff --git a/config/environment.js b/config/environment.js index 030606e..8e65cc2 100644 --- a/config/environment.js +++ b/config/environment.js @@ -4,7 +4,8 @@ module.exports = function(/* environment, appConfig */) { return { ifa: { - enabled: false + enabled: false, + inline: false } }; }; diff --git a/index.js b/index.js index 2d42d5a..dd7528a 100644 --- a/index.js +++ b/index.js @@ -3,19 +3,40 @@ let fs = require('fs'); +const findRoot = (current) => { + let app; + + // Keep iterating upward until we don't have a grandparent. + // Has to do this grandparent check because at some point we hit the project. + do { + app = current.app || app; + } while (current.parent && current.parent.parent && (current = current.parent)); + + return app; +}; + module.exports = { name: 'ember-cli-ifa', - isDevelopingAddon: function() { + isDevelopingAddon() { return false; }, - included: function(app) { - this.app = app; + included(app) { + this.app = findRoot(this); this._super.included.apply(this, arguments); }, - postBuild: function (build) { + postBuild(build) { + this._super.included.apply(this, arguments); + + const env = process.env.EMBER_ENV; + const ifaConfig = this.app.project.config(env).ifa; + + if (!ifaConfig.enabled) { + return; + } + let fingerprintPrepend = '/'; let indexFilePath = build.directory + '/index.html'; let testIndexFilePath = build.directory + '/tests/index.html'; @@ -44,22 +65,29 @@ module.exports = { fingerprintPrepend = this.app.options.fingerprint.prepend; } - let assetMapContent = null; + let assetFileNamePath = `${build.directory}/assets/${assetFileName}`; - if (assetFileName) { - assetMapContent = `"${fingerprintPrepend + 'assets/' + assetFileName}"`; + let assetMapPlaceholder; + + if (ifaConfig.inline && fs.existsSync(assetFileNamePath)) { + assetMapPlaceholder = fs.readFileSync(assetFileNamePath, {encoding: 'utf-8'}); + + } else { + if (assetFileName) { + assetMapPlaceholder = `"${fingerprintPrepend}assets/${assetFileName}"`; + } } - fs.writeFileSync(indexFilePath, indexFile.replace(/__asset_map_placeholder__/, assetMapContent)); + fs.writeFileSync(indexFilePath, indexFile.replace(/__asset_map_placeholder__/, assetMapPlaceholder)); if (testIndexFile) { - fs.writeFileSync(testIndexFilePath, testIndexFile.replace(/__asset_map_placeholder__/, assetMapContent)); + fs.writeFileSync(testIndexFilePath, testIndexFile.replace(/__asset_map_placeholder__/, assetMapPlaceholder)); } }, contentFor(type, config) { if (type === 'head-footer' && config.ifa && config.ifa.enabled) { - return ''; + return ''; } } }; diff --git a/tests/dummy/app/controllers/application.js b/tests/dummy/app/controllers/application.js new file mode 100644 index 0000000..afbf4b7 --- /dev/null +++ b/tests/dummy/app/controllers/application.js @@ -0,0 +1,13 @@ +import Controller from 'ember-controller'; +import service from 'ember-service/inject'; +import computed from 'ember-computed'; + +export default Controller.extend({ + assetMap: service(), + + image: 'assets/tomster-under-construction', + + imagePath: computed(function() { + return this.get('assetMap').resolve(`${this.get('image')}.png`); + }), +}); diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs index 18fedb0..e197fc5 100644 --- a/tests/dummy/app/templates/application.hbs +++ b/tests/dummy/app/templates/application.hbs @@ -1 +1,22 @@ - +
+
+ +
+ Template replace +
+
+ +
+ +
+ Asset Map Service +
+
+ +
+ +
+ Asset Map Helper +
+
+