Home / JavaScript / MVC Frameworks

A light, fast, flexible Javascript IOC container

wire.js Wire is an Inversion of Control Container for Javascript apps, and acts as the Application Composition layer for cujoJS. Wire provides architectural plumbing that allows you to create and manage application components,
Information
Category: JavaScript / MVC Frameworks
Watchers: 41
Star: 863
Fork: 71
Last update: Dec 5, 2023
Resource links
https://github.com/cujojs/wire

Build Status

wire.js

Wire is an Inversion of Control Container for Javascript apps, and acts as the Application Composition layer for cujoJS.

Wire provides architectural plumbing that allows you to create and manage application components, and to connect those components together in loosely coupled and non-invasive ways. Consequently, your components will be more modular, easier to unit test and refactor, and your application will be easier to evolve and maintain.

To find out more, read the full introduction, more about the concepts behind wire, and check out a few example applications.

Documentation

  1. Getting Started
  2. Reference Documentation
  3. Example Code and Apps
  4. Full Changelog

License

wire.js is licensed under The MIT License.

47 Open More issues
Closed

Create factory shortcut throws error in IE8

If you do this

create: 'app/conversations/utils/UserProxy'

instead of

create: 
    module: 'app/conversations/utils/UserProxy'

Then IE8 throws a 'Type Error: Object expected'

opened Nov 6, 2013 by gehan 34
Closed

Exception Handling -- Where are my errors?!

I'm running into an into an issue where thrown errors are being caught -- and seemingly released into the ether -- within the Wire JS Promise library (when).

It took a few tries to reproduce, as the original application was fairly complex. But I have a sample now up at eschwartz/when-exceptions. Run index.html and check your console -- expected behavior is to have an error thrown to the console.

The sample is dead simple -- a Foo module loads in a wired context. The Foo#bar method throws an error. The application pulls in Foo with RequireJS, instantiates it, and invokes the bar method.

But the error gets caught inside of the when library, here:

// when.js line 408
function near(proxy, inspect) {
        return new Promise(function (type, args, resolve) {
            try {
                resolve(proxy[type].apply(proxy, args));
            } catch(e) {
                resolve(rejected(e));  // Oh no... my error!!!
            }
        }, inspect);
    }

I am using the most recent versions of wire, when, and meld.

What's happening here? I wouldn't expect errors in this situation to be caught. Can I hook into the promise being referenced in the near method? Can I avoid this situation entirely, and let my errors be thrown?

I'm having a lot of fun with this library, so I hope this can be fixed, or worked-around. Thanks!

opened Oct 18, 2013 by eschwartz 19
Closed

Add jQuery UI support

Create a plugin that allows declarative wrapping of a dom element in a jQuery UI widget. This plugin should work with other widget collections that use jQuery UI as a base.

Note: the loading of jQuery UI files is a different concern. Will work out a curl.js solution for that.

Started work on it here: https://github.com/cujojs/wire/blob/jquery-ui/jquery/ui.js Tests are in the usual place. :) Feedback welcome.

opened Feb 15, 2013 by unscriptable 18
Closed

Passing in literals at wire time

I'm trying to put together a project using wire.js at the moment, and I'm at the situation where I need to be able to pass some literals (mainly DOM IDs) into the loaded spec.

The scenario is that the JS app being constructed by Wire.js is an application that can be embedded on other people's sites. As such, the name of DOM elements be referenced will be different each time.

I'd like to keep my application code clean and not include any global variable references, I'd like to pass everything in via the proxy wrapper that sits between the site and the application code (and which sets up Curl, calls wire.js, etc)

The code for retrieving the IDs of the DOM elements already exists in the wrapper code, I just need some way of getting that into the spec.

Any way of constructing a child context and passing it in as a string rather than having it loaded by the AMD loader?

opened Jun 26, 2012 by Worsh 18
Closed

Parallel lifecylce methods

Hi Brian,

We have split up our wire specs into something like:

settings.js (loads settings from servere once) services.js (loads navigation data, conditions, links, etc..) app.js (App, controllers, router, etc...)

In the services.js we have services with async/pomised init methods that load data from the server. we have seen that even if there is no interdependency between components that the service calls are executed in sequence rather than paralllel. This has a very big impact for us when latency is high. In our case getting data from China in Europe. We don't use lazy loading as that would also suffer from sequential loading.

Basically I think if there are no dependencies between componenets in a context than any lifecycle method that returns a promise should be resolved in a context scoped parallel promise.

Is this clear?

opened Nov 8, 2013 by jbadeau 13
Closed

fixes #162: Allow import of a context-spec into another.

opened May 23, 2014 by ouadi 12
Open

Feature/es6 class constructor support

Adds support for constructing es6 class instances. Fixes #181

Tests do not pass at this moment to highlight the non-backwards compatible change in automatic constructor detection. In order to accurately detect es6 classes I added check whether functions have a "constructor" property. As I have no better idea how to detect those classes, it's either this or explicit isConstructor will be needed in all components loading es6 classes.

When a decision is made how to approach this, I will adjust tests to conform to it.

opened Apr 11, 2016 by OJezu 16
Open

Not es6 ready - does not work with es6 classes

If I declare class using es6 class keyword:

class Foo {
    constructor(foo, bar) {}
}
module.exports = Foo;

And I try to load it using wire:

wire({
   "foo": {
        "module": "Foo",
        "args": ["monty", "python"],
    },
});

I get an error:

TypeError: Class constructors cannot be invoked without 'new'
    at BrowserConnectionFactory ()
    at instantiate (.../node_modules/wire/lib/instantiate.js:37:20)
    at createInstance (.../node_modules/wire/lib/plugin/basePlugin.js:250:7)

Wire (actually when) is trying to do Foo.apply(new_foo, args), which is not allowed in es6. Solution would be using new spread operator - new Foo(...args) , but that is not backwards-compatible. PR #180 has possible workaround with named constructors which can be called with "apply".

opened Mar 29, 2016 by OJezu 2
Open

Dependencies when destroying a context?

When a context is created, if component A depends on B, then B will be created before A. Is there a way to insure that when a context is destroyed that the dependent is destroyed before the dependency - i.e. A is destroyed before B?

The behavior I'm seeing is the components are destroyed in the same order that they are created, which means that dependencies are destroyed before the components that use them. Hence dependencies get ripped out from under the code that needs them.

My scenario is a component which writes status updates and a database component. The status updater depends on the database, so the database gets created (and connected) before the status updater gets created, so the database is ready before any status updates get written. But on destroy, the database gets destroyed (and the connection closed) before the status updater (since that's the order they were created), so the last status updates error out because the database has been torn down before the status updater has finished.

opened Oct 19, 2015 by billwolckenlmco 0
Open

create factory should invoke function with context if module is a method of an object

By allowing the resolved method to be called with a bound this, it would allow one to implement the Builder pattern without having to pass all dependencies as method parameters (because this is undefined). At first glance this could be accomplished by fixing instantiate.js's instantiate function to provide a this arg in the invocation of apply:

begotten = ctor.apply(undef, args);

I also tried to use the invoker factory, but there some spookiness going on with regards to promises...

opened Sep 21, 2015 by ChrisEineke 0
Open

Using components from child and sibling contexts

There doesn't seem to be a way to use components in child and sibling contexts from within the spec. Once everything is wired you can of course use them with childContext.someComponent but you can't do that from the spec.

I'd like to propose this:

// child-spec.js
define({
    aComponent: {
        module: "someModule"
    }
});

// parent-spec.js 
define({
    childContext: {
        wire: "./child-spec"
    }
    anotherChildContext: {
        wire: "./another-child-spec"
    }
    aReference: {
        module: { $ref: "childContext.aComponent" }
    }
    // aReference resolves to aComponent in childContext
});

// another-child-spec.js
define({
    anotherReference: {
        module: { $ref: "childContext.aComponent" }
    }
    // anotherReference resolves to aComponent in childContext (a sibling context)
});

Currently you can only use top-level components from ancestor contexts. This includes any child contexts declared in the ancestor contexts; however, you can't directly use any components from them.

A good use for this would be namespacing. For example, if I had a bunch of controllers that I needed to use throughout my application, I could register them under a child context called controller. Then I could just use the components in controller in my spec with "controller.post" or "controller.user" etc. instead of "polluting" the parent namespace with lots of controller names.

opened Sep 11, 2015 by ghost 0
Open

Using properties or methods of other modules or components as components

I've been using Wire for several node.js projects and it's been great. While designing wire specs I repeatedly found myself wanting to use the methods or components of another module or component as a component. I've read through all the documentation but couldn't seem to find a way to do this. For example:

define({
    doSomething: {
        module: "aComponent.someMethod"
    }
    // doSomething is someMethod of aComponent
});

You could do the same for create, which would instantiate the constructor or class using the same logic to instantiate modules:

define({
    anInstance: {
        create: "aComponent.SomeClass"
    }
    // anInstance is a new instance of SomeClass of aComponent
});

You could pass methods around as properties or arguments:

define({
    aComponent: {
        module: "aComponent",
        properties: {
            aMethod: {
                module: "anotherComponent.aMethod"
            }
        }
    }
    // aMethod of anotherComponent is injected to aComponent as aMethod
});

define({
    anInstance: {
        create: {
            module: "aComponent",
            args: [
                { module: "anotherComponent.someProperty" }
            ]
        }
    }
    // someProperty of anotherComponent is passed to aComponent to create anInstance
});

And if you can reference a top level method of a component, why not make it possible to reach deep down into a component too:

define({
    aComponent: {
        module: "anotherComponent.foo.bar.baz.someProperty"
    }
    // aComponent is someProperty, which is deeply nested inside anotherComponent
});

And references would be able to reach into a component declared elsewhere:

define({
    aComponent: {
        create: "aComponent"
    }

    anotherComponent: { $ref: "aComponent.someProperty" }
    // anotherComponent is someProperty of whatever aComponent is declared as
});

Right now the only way I see to achieve this is to extract each method or property into its own module. However, a lot of the time it makes more sense for a module to provide a collection of methods, but then it isn't possible in the current wire to use each of those methods as components.

It would be really cool this could be possible in Wire. Since it's already possible to compose component methods using dot syntax, I'm proposing that it should also be possible to use component methods as components, using the same syntax. I think its also somewhat similar to wire/dom in its ability to reach into a dom.

What do you think? Is there a really obvious way to do this that I'm missing? Should a plugin be created for this, or could this be something that belongs in the core?

opened Sep 10, 2015 by ghost 0

0.10.11(Apr 29, 2015)

  • Allow incoming connections to "fan out" to multiple methods by supplying an array of method names (or pipelines).

0.10.10(Feb 28, 2015)

0.10.9(Aug 14, 2014)

  • Allow arbitrarily deep dot traversal in $refs, eg: { $ref: 'a.b.c.d.e' }.

0.10.8(Jun 24, 2014)

  • New $imports feature allows declaratively importing wire specs. Check out the docs for more info.
  • Minor internal unit/integration test fixes:

0.10.7(Apr 10, 2014)

0.10.6(Mar 18, 2014)

  • Fix semver range for when dependency (#155). Note A clean install of wire < 0.10.6 may install when.js 3.0.0, with which wire is not yet compatible. Version 0.10.6 fixes the semver spec in wire's package.json so that a compatible version of when.js 2.x will be installed.

Contents

    agoda-com C# IoC extension library, used at Agoda for Registration of classes into IoC container based on Attributes.
    studyzy A lightweight IoC dependency injection container for Golang
    GoogleContainerTools container-diff: Diff your Docker containers
    inversify A powerful and lightweight inversion of control container for JavaScript & Node.js apps powered by TypeScript.
    networknt A fast, light and cloud native OAuth 2.0 authorization microservices based on light-4j
    dealloc vue-container - A simple dependency injection library for Vue 2.
    dealloc vue-container - A simple dependency injection library for Vue 2.
    ibeizhu Vue flexible modal popup component,Live Demo
    bluejoe2008 writer for spring IOC beans files
    swisscom Threat intelligence and threat detection indicators (IOC, IOA)
    santosomar A Simple Log4j Indicator of Compromise Linux Detector
    0xj3lly Log4j Detection and IOC scanner written in Bash
    vanlooverenkoen A simple compile-time dependency injection library for Dart and Flutter
    philchia dock try to re-implement docker 🐳
    Azure-Samples Azure Sample showing how to connect and call multiple container apps within the same environment. Shows the approach to use both with and without Dapr.
    0shuvo0 Red light green light game from squid game made using JavaScript and Three.js
    bcicen Top-like interface for container metrics
    genuinetools Container introspection tool. Find out what container runtime is being used as well as features available.
    mafintosh Container runtime for Dat
    containerbuilding Container Builder Interface for Kubernetes with support for several backends (Docker, BuildKit, Buildah, kaniko, img, Google Cloud Container Builder, Azure Container Registry Build, OpenShift Source-to-Image...)
    ceph Docker files and images to run Ceph in containers
    Share this repo

    Related Repos


    MVC Frameworks
    2.2k
    JavaScript powered forms for AngularJS
    formly-js angular-formly THIS PROJECT NEEDS A MAINTAINER Status: Links: angular-formly is an AngularJS module which has a directive to help customize and render
     
    MVC Frameworks
    2.2k
    Starter Repository for AngularJS Material
    angular AngularJS Material-Start (ES6) This branch contains the final/complete version (i.e. step-10-finished) of the Material Start ES6 Tutorial branch in th
     
    MVC Frameworks
    3
    Introduction to Angular - Session 01 source code
    ngsrilanka 01 - Introduction to Angular Prerequisites Node.js. - If you have not downloaded and installed Node in your computer: Download Node. https://nodejs.or
     
    MVC Frameworks
    5
    Ä°t will be angular 101 live coding event.
    byemrekaya BeykentUniAngular101 This project was generated with Angular CLI version 12.0.2. Development server Run ng serve for a dev server. Navigate to http://
     
    MVC Frameworks
    13k
    A JavaScript Framework for Building Brilliant Applications
    MithrilJS mithril.js What is Mithril? Installation Documentation Getting Help Contributing What is Mithril? A modern client-side JavaScript framework for buildi
     
    MVC Frameworks
    10k
    The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angu...
    tinymce TinyMCE The world's #1 open source rich text editor. Used and trusted by millions of developers, TinyMCE is the world’s most customizable, scalable, a
     
    MVC Frameworks
    564
    Webplate is an awesome front-end framework that lets you stay focused on building your sit...
    chrishumboldt Webplate Framework Webplate is an awesome front-end framework that lets you stay focused on building your site or app all the while remaining really e
     
    MVC Frameworks
    3
    ConstitutionDAO front-end
    Constitution-DAO ConstitutionDAO: front-end TL;DR This repo is for the ConstitutionDAO front-end. Learn more Website Discord Twitter FAQs How to contribute Please join
     
    MVC Frameworks
    6
    Custom tours for angular applications
    miraxes This is new a bit extended version of https://github.com/miraxes/angular-custom-tour. For versions less than Angular v6, please use older version of t
     
    MVC Frameworks
    3
    TP angular
    iset-gafsa MT Walid HAMMAMI ISET GAFSA 2021 TP 1 : Premier pas avec Angular Objectifs : A la fin de ce TP l’étudiant sera capable : D’installer les diffĂ©rents ou
     
    MVC Frameworks
    16
    zero-to-mastery re-usable web component library.
    zero-to-mastery WebBlocks TL;DR There is a big hype about front-end frameworks all over the place. But what if we could build components without the need to reach out
     
    MVC Frameworks
    1.3k
    Lambda API is a lightweight web framework for your serverless applications
    jeremydaly Lambda API is a lightweight web framework for AWS Lambda using AWS API Gateway Lambda Proxy Integration or ALB Lambda Target Support.
     
    MVC Frameworks
    25
    The next unicorn inside a unicorn :rocket:
    viniciusestevam A progressive Node.js framework for building efficient and scalable server-side applications. Description Nest framework TypeScript starter repository
     
    MVC Frameworks
    222
    An Open-Source framework designed for best possible time to interactive, by focusing on re...
    BuilderIO An Open-Source framework designed for best possible time to interactive, by focusing on resumability of server-side-rendering of HTML, and fine-grained lazy-loading of code.
     
    MVC Frameworks
    10
    Grecha.js - Simple Front-End JavaScript Framework
    tsoding Grecha.js - Simple Front-End JavaScript Framework