izi-vue

WebJar for izi-vue

License	MIT
GroupId	org.webjars.npm
ArtifactId	izi-vue
Last Version	1.1.2
Release Date	Mar 5, 2020
Type	jar
Description	izi-vue WebJar for izi-vue
Project URL	https://www.webjars.org
Source Code Management	https://github.com/gejgalis/izi-vue

Download izi-vue

Filename	Size
izi-vue-1.1.2.pom
izi-vue-1.1.2.jar	135 KB
izi-vue-1.1.2-sources.jar	22 bytes
izi-vue-1.1.2-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/izi-vue/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>izi-vue</artifactId>
    <version>1.1.2</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/izi-vue/
implementation 'org.webjars.npm:izi-vue:1.1.2'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/izi-vue/
implementation ("org.webjars.npm:izi-vue:1.1.2")

Apache Buildr

'org.webjars.npm:izi-vue:jar:1.1.2'

Apache Ivy

<dependency org="org.webjars.npm" name="izi-vue" rev="1.1.2">
  <artifact name="izi-vue" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='izi-vue', version='1.1.2')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "izi-vue" % "1.1.2"

Leiningen

[org.webjars.npm/izi-vue "1.1.2"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

izi IoC & DI for Vue

This izi (as in 'easy') library will help you to organize your JavaScript code around Vue components. Using this tool you may easily introduce any of modern patterns like Flux, Redux or MV*.

Usage

1. Download package:

   npm install izi-vue --save
   

   This package includes izi-js. You don't need to download separate izi-js package.

2. Install plugin in Vue and prepare your common.js:

   import Vue from "vue";
   import izi from "izi-vue";
   
   const {MainView, iziInjectMixin} = izi.createVueHelpers(Vue);
   
   export {Vue, izi, MainView, iziInjectMixin}
   // you may put here other libraries you want to use like LoDash etc...

3. Create FooModel.js:

   export default class FooModel {
       constructor() {
           this.foo = "Foo";
       }
   }

4. Create FooController.js:

   import {izi} from "./common";
   
   export default class FooController {
   
       constructor() {
           this.model = izi.inject("FooModel");
       }
   
       changeFooToBar() {
           this.model.foo = "Bar";
       }
   };

5. Create FooComponent.js:

   import {iziInjectMixin} from "./common";
   
   export default {
       // Mixin required for dependency injection
       mixins: [iziInjectMixin],
   
       // Dependency injection configuration
       iziInject: {
           // injects regular instance of dependency accessible via: this.controller...
           controller: "FooController",
       
           data: { // injects dependencies specially prepared for data binding
               model: "FooModel"
           }
       },
   
       template: `<div>
                       Hello injected {{model.foo}}!
                       
                       <button @click="controller.changeFooToBar()">Change Foo to Bar</button>
                  </div>`
   };

6. Create your IoC container app.js:

   import {izi, MainView} from "./common";
   
   import FooModel from "./FooModel";
   import FooController from "./FooController";
   import FooComponent from "./FooComponent";
   
   izi.bakeBeans({
       FooModel,
       FooController,
       FooMainView: izi.instantiate(MainView).withProps({
           component: FooComponent,
           el: "#app",
           proxyMethods: true // all methods from FooComponent will be proxied via FooMainView bean
       })
   });

Unit Test

Proposed approach lets you execute unit tests for code not related to DOM on NodeJS. You may test faster all corner cases skipping heavy browser tests.

import FooModel from "./FooModel";
import FooController from "./FooController";

describe("FooController", () => {

    var model, controller;
    
    beforeEach(() => {
        model = new FooModel();
        
        controller = new FooController();
        controller.model = model;          // set needed dependencies
    });
    
    it("should change foo to bar", () => {
        // given
        expect(model.foo).to.be("Foo");
        
        // when
        controller.changeFooToBar();
        
        // then
        expect(model.foo).to.be("Bar");
    });
});

Versions

Version
1.1.2 Mar 5, 2020
1.1.1 Oct 20, 2017
1.1.0 Aug 17, 2017