-
Notifications
You must be signed in to change notification settings - Fork 68
Wire specs
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.
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
define({
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 idhello-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' }
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.