Wire specs

Brian Cavalier edited this page May 8, 2012 · 6 revisions

Similar to declarative IOC containers for other platforms, such as Spring Framework for Java, wire has an extensible DSL. The core DSL has a very simple form, and only a handful of top-level keywords. The DSL can be extended by plugins.

Wire specs are declarative, and thus order does not matter. Wire will process the spec in dependency order, regardless of how you choose to order components. A typical best practice is to order your spec in a logical way, placing related components near each other, and optimizing for readability and understandability.

A wire spec is a Javascript object literal or JSON object that describes a set of components. Wire.js parses a wire spec as input and produces the fully realized set of components as output.

In their simplest form, components can be any simple Javascript type, such as Strings, Numbers, Arrays, etc., including RegExp and Date when the spec is a Javascript object literal. More interestingly, components can be things such as AMD modules, constructors, or factory functions that wire.js can use to create instances of larger, more complex components of your application.

A simple wire spec

Here is the wire spec from the Hello Wire example. You can read a complete walkthrough of this wire spec at the Hello Wire github repo

    message: "I haz been wired",
    helloWired: {
        create: {
            module: 'hello-wired',
            args: { $ref: 'dom!hello' }
        init: {
            sayHello: { $ref: 'message' }
    plugins: [
        { module: 'wire/dom' }


This simple wire spec has three top-level components:

  • message - a String
  • helloWired - an AMD module with module id hello-wired. In this case the module is a constructor function, which wire.js will use to create an object instance.
  • plugins - an Array containing one AMD module to load. This module happens to be a wire.js plugin for referencing DOM nodes--read more on referencing below and in the References section.


The wire spec also contains two references using JSON Referencing-like syntax. The first references a DOM Node by id:

{ $ref: 'dom!hello' }

The second references the messages String (the first item in the wire spec):

{ $ref: 'message' }

Wiring the spec

When you feed a wire spec to wire.js, it will create a Context containing fully realized versions of the components in the spec. In the Hello Wire case, the Context will contain the message String, an instance of the HelloWired object from the hello-wired AMD module, and an Array with one element--the wire/dom plugin AMD module.