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

ember-cli-ifa

Package Overview
Dependencies
Maintainers
3
Versions
15
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ember-cli-ifa

Inject fingerprinted assetMap.json file into your app and provide initializer, service, and helper to dynamically reference fingerprinted assets.

  • 0.8.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
1.1K
decreased by-31.61%
Maintainers
3
Weekly downloads
 
Created
Source

Build Status Code Climate

Ember-cli-ifa

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.
  2. If you can't put your asset filemames into css or to have path as static in your .js files.
  3. If you build your image/asset paths in a dynamic way, eg.
imagePath: computed(function() {
  return this.get('assetMap').resolve(`${this.get('image')}.png`);
})

Installation

ember install ember-cli-ifa

Configuration

Enable addon in environment.js for specific environment.

module.exports = function(environment) {
  var ENV = {
    ...
    ifa: {
      enabled: true,
      inline: false,
    }
    ...
  };

In case you use s3 and manifest module for ember-cli-deploy, update there configurations in config/deploy.js to include json as a valid file.

module.exports = function(environment) {
  var ENV = {
    ...
    s3: {
      filePattern: function(context, pluginHelper) {
        let filePattern = pluginHelper.readConfigDefault('filePattern');
        return filePattern.replace('}', ',json}');
      },
      ...
    },
    manifest: {
      filePattern: function(context, pluginHelper) {
        let filePattern = pluginHelper.readConfigDefault('filePattern');
        return filePattern.replace('}', ',json}');
      },
      ...
    },
    ...
  };

Configure fingerprinting in ember-cli-build.js. Refer to the documentation of ember-cli for asset-compilation

fingerprint: {
  enabled: true, // set to true only in required environments
  generateAssetMap: true,
  fingerprintAssetMap: true
}

Note that if you use fastboot, this addon is automatically forced into inline: true mode. This is necessary, as otherwise fastboot could not easily access that data.

Usage

asset-map helper

If name is tomster-under-construction:

<img src={{asset-map (concat "assets/" name ".png")}} />

then it will generate something like assets/tomster-under-construction-da524c8bc9283f759ae640b68db81f24.png base on assetMap.json.

asset-map service

import Component from 'ember-component';
import service from 'ember-service/inject';

export default Component.extend({
  assetMap: service('asset-map'),

  key: null, // key passed as 'tomster-under-construction'

  // result will be assets/tomster-under-construction-da524c8bc9283f759ae640b68db81f24.png
  image: computed('key', function() {
    return this.get('assetMap').resolve(`assets/${this.get('key')}.png`);
  })
});

Storing assets in a sub-directory

If prepend option is added in fingerprint configuration block, it will be prepended into generated asset path in the index.html.

// ember-cli-build.js
// ...
var app = new EmberApp(defaults, {
  fingerprint: {
    prepend: '/blog/'
  }
});

/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.

This might save one request to assetMap.json, but will increase overall size of index.html file, so use carefully.

Keywords

FAQs

Package last updated on 23 Oct 2019

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