es-dependencies-transform

Dependencies Transform

Browserify tranform for dependencies (DI container switcher). The original purpose is to switch the dependency injection mapping module before the code is being process by browserify.

In denial it is just a text replace in JS files prior to further processing via browserify.

package.json

#!json

"devDependencies": {
  "es-dependencies-transform": "^1.0.0"
}

How to setup the GULP task

#!javascript

// Browserify
var browserify = require('browserify');

// Dependencies transformer
var dependencies_transform = require('es-dependencies-transform');

// Bundle task
gulp.task('BUNDLE_APP', function() {
  // Init browserify with you main app entry point (script)
  var appBundler = browserify({
    entries: './dev/js/app.js'
  })

  // DI Context could resolved in various ways
  // Different tasks, read from config file, etc.
  var dependenciesContext = 'context_1';

  // Bundle app
  appBundler
    // Here is our DI transformation
    .transform(dependencies_transform, {
      context: dependenciesContext
    })
    // Any other transformations

    // Bundle and dist the app
    .bundle()
    .pipe(source('app.min.js'))
    .pipe(gulp.dest('./dist/js/'));
});

Transform params

#!javascript
.transform(dependencies_transform, {
  context: 'NAME_OF_THE_CONTEXT',
  searchFor: 'reg ex string' // OPTIONAL, default value "import dependenciesMapping from '(.*\\/).*';"
  replaceWith: 'reg ex string' // OPTIONAL, default value "import dependenciesMapping from '$1#replace#';" ($1#replace# - required string, used as the location in string of the injected context)
})

How it is actually the DI setup in app.js?

This is a micro DI solution example:

##app.js##

#!javascript

// ... other code

// Dependencies Injection
import Dependencies from './dependencies/injections';

// ... other code

##injections.js##

#!javascript

// Dependency resolver
import DependencyResolver from '../utils/dependecyResolver';

// Dependencies mapper file
// This will be transformed in bundling process
import dependenciesMapping from './EXAMPLE_CONTEXT';

// Register dependencies
DependencyResolver.registerMany(dependenciesMapping);

export default {};

##Example DI mapping file EXAMPLE_CONTEXT.js##

#!javascript

// Info
console.log('Used Dependencies Context: EXAMPLE_CONTEXT');

// Concrete instances
import Service1 from '../location-of-service-1';
import Service2 from '../location-of-service-2';

// Register dependencies
export default [
  {
    name: 'Service1',
    instance: Service1
  },
  {
    name: 'Service2',
    instance: Service2
  }
];

##dependecyResolver.js##

#!javascript

/*
 * This class resolves and register dependencies
 * Is is a small dependecy injection framework
 */
class DependencyResolver {
  /*
   * Constructor
   */
  constructor() {
    // Prepare registerd dependencies
    this.dependencies = [];
  }

  /*
   * Register dependency
   *
   * @param {string} name - name of the dependency
   * @param {obj} instance - intance object witch will be used for injection
   */
  register(name, instance) {
    // Already registered
    if (this.dependencies[name]) {
      throw new Error('Can\'t register ' + name + '. It has been already registerd.');
    }
    this.dependencies[name] = instance;
  }

  /*
   * Register multiple dependencies
   *
   * @param {array} dependencies - Register mutiple dependencies
   */
  registerMany(dependencies) {
    dependencies.map((dependency) => {
      this.register(dependency.name, dependency.instance);
    });
  }

  /*
   * Resolve dependency
   *
   * @param {string} name - name of the dependecy tried to resolve
   */
  resolve(name) {
    // Registred dependecy
    if (this.dependencies[name]) {
      return this.dependencies[name];
    }

    // Not found
    throw new Error('Can\'t resolve ' + name);
  }
}

// Export service instance
export default new DependencyResolver();

##Usage of registred service in DI mapping##

#!javascript

// ... other code

// Import DI resolver
import DependencyResolver from './utils/dependecyResolver';

// Get service instance from DI resolver
const service1 = DependencyResolver.resolve('Service1');

// Call any methods on the service instance
service1.MethodA();

// or service could be just an object or value

// ... other code