npmpackage.info

@vue-ioc/core

IoC and DI for Vue powered by InversifyJS and inspired by Angular Module syntactic sugar.

0.2.3

TypeScript

3.04 kB

Installations

npm install @vue-ioc/core

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

12.16.1

NPM Version

lerna/3.18.4/node@v12.16.1+x64 (win32)

Score

53.3

Supply Chain

95.1

Quality

75.6

Maintenance

Vulnerability

99.6

License

Pull Requests

Open

44

Total

82

Closed

23

Merged

15

Issues

Open

0

Total

8

Closed

8

Releases

v0.2.0

Updated on Mar 01, 2020

v0.1.2

Updated on Jan 15, 2020

v0.1.0

Updated on Nov 18, 2019

v0.0.5

Updated on Jan 06, 2019

View All 4 releases

Contributors

Unable to fetch Contributors

View All 2 Contributors

Languages

TypeScript

Vue

JavaScript

HTML

TypeScript (78.4%)

Vue (15.06%)

JavaScript (5.79%)

HTML (0.75%)

validate.email 🚀

Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.

Developer

vue-ioc

Download Statistics

Total Downloads

5,742

Last Day

Last Week

Last Month

Last Year

321

GitHub Statistics

44 Stars

64 Commits

2 Forks

2 Watchers

45 Branches

2 Contributors

Updated on Dec 10, 2024

Bundle Size

11.86 kB

Minified

3.04 kB

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

0.2.3

Package Id

@vue-ioc/core@0.2.3

Unpacked Size

65.69 kB

Size

17.52 kB

File Count

NPM Version

lerna/3.18.4/node@v12.16.1+x64 (win32)

Node Version

12.16.1

Total Downloads

Cumulative downloads

Total Downloads

5,742

Last Day

100%

Compared to previous day

Last Week

28.6%

Compared to previous week

Last Month

-39.2%

Compared to previous month

Last Year

-53.5%

321

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

inversify reflect-metadata vue vue-class-component

Dev Dependencies

@types/chai @types/mocha awesome-typescript-loader inversify jsdom mocha reflect-metadata source-map-loader ts-node tslint tslint-loader typescript vue vue-class-component webpack webpack-cli

vue-ioc

IoC and DI for Vue powered by InversifyJS and inspired by Angular @Module syntactic sugar.

Required Opinionated Stack

Vue 2.x
vue-class-component
TypeScript with config flags: experimentalDecorators: true and emitDecoratorMetadata: true

Features

Hierarchical IoC Container defined in @Module by providers (using InversifyJS under the hood). The hierarchy is bound to Vue components tree.
Autostart - instantiating top level services when container has been started (for background tasks similar to @Effects from ngrx).
@InjectReactive() - makes injected dependency 'deeply reactive' in Vue template.
Instance Handlers - @PostConstruct and @BeforeDestroy - decorators for methods called when instance is created or destroyed by container.
Custom Instance Handlers ie. @OnEvent('submitForm')
providedIn 'root' or 'self' - select where will be bound @Injectable (friendly for tree shakeable singletons and lazy loaded @Modules)

Planned features (not ready yet)

State Injectors for Vuex and MobX.
vue-cli integration

Caveats / Limitations

@Module can be bound only to Vue component.
You can't use @Inject() for Vue component constructor arguments (because you can't define own constructor using vue-class-component). Only Vue component class fields are supported.

Installation

vue-ioc uses following peerDependencies:

inversify
reflect-metadata
vue-class-component
vue

1
2# NPM
3npm install @vue-ioc/core inversify reflect-metadata vue-class-component vue --save
4
5# Yarn
6yarn add @vue-ioc/core inversify reflect-metadata vue-class-component vue

You must explicitly install vue-ioc via Vue.use() in your app main entrypoint:

1// main.ts
2import Vue from 'vue'
3import {VueIocPlugin} from '@vue-ioc/core' 
4
5Vue.use(VueIocPlugin)

Quick Start

Create simple injectable service HttpService:

1// ./services/HttpService.ts
2import {Injectable} from '@vue-ioc/core';
3
4@Injectable()
5export class HttpService {
6    public get(url: string): Promise<any> {
7        return fetch(url).then(rs => rs.json());
8    }
9}

Add root container using @Module decorator at your top level App component and setup providers:

1// App.vue
2<template>
3    <div>
4        <HelloWorld/>
5    </div>
6</template>
7<script lang="ts">
8    import Vue from 'vue'
9    import Component from 'vue-class-component'
10    import {Module} from '@vue-ioc/core';
11    import {HttpService} from './services/HttpService';
12    import HelloWorld from './components/HelloWorld.vue';
13    
14    @Module({
15        providers: [
16            HttpService
17        ]
18    })
19    @Component({
20      components: { HelloWorld }
21    })
22    export default class App extends Vue {
23    }
24</script>

Inject HttpService to <HelloWorld> component:

1// ./components/HelloWorld.vue
2<template>
3    <div>
4        <h2 v-if="user">Hello {{user.firstName}} {{user.lastName}}!</h2>
5    </div>
6</template>
7<script lang="ts">
8    import Vue from 'vue'
9    import Component from 'vue-class-component'
10    import {Inject} from '@vue-ioc/core';
11    import {HttpService} from '../services/HttpService';
12
13    @Component()
14    export default class HelloWorld extends Vue {
15
16        @Inject()
17        public httpService: HttpService;
18        
19        public user = null;
20
21        public async created() {
22            this.user =  await this.httpService.get('./hello.json');
23        }
24    }
25</script>

Providers

1@Module({
2    providers: [
3        // useClass
4        { provide: HttpService, useClass: HttpService },
5        
6        // useClass shortcut 
7        HttpService,
8        
9        // useValue
10        { provide: HttpService, useValue: httpService },
11        
12        // useFactory
13        { provide: HttpService, useFactory: (injector) => /* ...injector.get(FooService)... */ }
14    ] 
15})

providedIn

Default value: 'self' Available values: 'root', 'self'

@Injectable( { providedIn: 'root' } ) will bind service in root (App) container always as singleton.

You may also override this setting at @Module providers level in both directions:

1@Module({
2    providers: [
3        { provide: HttpService, useClass: HttpService, providedIn: 'root' },   // overrides @Injectable()
4        { provide: OtherService, useClass: OtherService, providedIn: 'self' }, // overrides @Injectable( {providedIn: 'root'} )
5    ] 
6})

Custom Instance Handlers

@PostConstruct() and @BeforeDestroy() are two built in instance listeners. You may create custom instance handlers like @OnEvent('submitForm') by creating a decorator using createInstanceHandlerDecorator

Prepare the most basic EventBus implementation:

1// bus/EventBus.ts
2import Vue from 'vue';
3import {Injectable} from '@vue-ioc/core';
4
5@Injectable()
6export class EventBus {
7
8    private bus: Vue = new Vue();
9
10    dispatch(name: string, data: any) {
11        this.bus.$emit(name, data);
12    }
13
14    addListener(name: string, listener: (data: any) => void) {
15        this.bus.$on(name, listener)
16    }
17
18    removeListener(name: string, listener: (data: any) => void) {
19        this.bus.$off(name, listener)
20    }
21}
22

Create @OnEvent(name:string) decorator

1// bus/OnEvent.ts
2import {createInstanceHandlerDecorator} from '@vue-ioc/core';
3import {EventBus} from './EventBus';
4
5export function OnEvent(name: string) {
6    return createInstanceHandlerDecorator(({injector, instance, method}) => {
7        // attach handler - a place where listeners should be attached
8        const bus: EventBus = injector.get(EventBus); // you have access to injector where all services can be retrieved
9        const boundMethod = instance[method].bind(instance); // bound method to `this` of instance
10        bus.addListener(name, boundMethod);
11        return () => { 
12            // detach handler - a place where all listeners should be detached
13            bus.removeListener(name, boundMethod);
14        };
15    });
16}

Dispatch event from view:

1// view/Form.vue
2<template>
3    <div>
4        <button @click="submitForm">Submit</button>
5    </div>
6</template>
7<script lang="ts">
8    import Vue from 'vue'
9    import Component from 'vue-class-component'
10    import {Inject} from '@vue-ioc/core';
11    import {EventBus} from '../bus/EventBus';
12
13    @Component()
14    export default class SomeForm extends Vue {
15
16        @Inject()
17        public bus!: EventBus;
18
19        public submitForm() {
20            this.bus.dispatch('submitForm', { firstName: 'John', lastName: 'Doe'})
21        }
22    }
23</script>

Handle event in external action:

1// actions/SubmitForm.ts
2import {OnEvent} from '../bus/OnEvent'
3import {Injectable} from '@vue-ioc/core';
4
5@Injectable()
6export class SubmitForm {
7  
8  @OnEvent('submitForm')
9  perform (data) {
10     // do something with data
11  }
12}

Inversify Container Options

vue-ioc uses following default options for creating Inversify containers:

{
    autoBindInjectable: false,
    defaultScope: 'Singleton',
    skipBaseClassChecks: true,
}

To override or add other options, please use containerOptions of plugin options:

1Vue.use(VueIocPlugin, {
2  containerOptions: {
3    // options of Inversify container:
4    // https://github.com/inversify/InversifyJS/blob/master/wiki/container_api.md#container-options
5  }
6})

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

License

Determines if the project has defined a license.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

138 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38
Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc
Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm
Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-w7rc-rwvf-8q5r
Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
Warn: Project is vulnerable to: GHSA-3j8f-xvm3-ffx4
Warn: Project is vulnerable to: GHSA-4p35-cfcx-8653
Warn: Project is vulnerable to: GHSA-7f3x-x4pr-wqhj
Warn: Project is vulnerable to: GHSA-jpp7-7chh-cf67
Warn: Project is vulnerable to: GHSA-q6wq-5p59-983w
Warn: Project is vulnerable to: GHSA-j9fq-vwqv-2fm2
Warn: Project is vulnerable to: GHSA-pqw5-jmp5-px4v
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-29xr-v42j-r956
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
Warn: Project is vulnerable to: GHSA-38fc-wpqx-33j7
Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
Warn: Project is vulnerable to: GHSA-5j4c-8p2g-v4jx
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
Warn: Project is vulnerable to: GHSA-c6rq-rjc2-86v2
Warn: Project is vulnerable to: GHSA-hm92-vgmw-qfmx
Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-9vvw-cc9w-f27h
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-9j49-mfvp-vmhm
Warn: Project is vulnerable to: GHSA-h6ch-v84p-w6p9
Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p
Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q
Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
Warn: Project is vulnerable to: MAL-2023-462
Warn: Project is vulnerable to: GHSA-4q6p-r6v2-jvc5
Warn: Project is vulnerable to: GHSA-qh2h-chj9-jffq
Warn: Project is vulnerable to: GHSA-7wwv-vh3v-89cq
Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
Warn: Project is vulnerable to: GHSA-86wf-436m-h424
Warn: Project is vulnerable to: GHSA-8w57-jfpm-945m
Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
Warn: Project is vulnerable to: GHSA-8g7p-74h8-hg48
Warn: Project is vulnerable to: GHSA-pc5p-h8pf-mvwp
Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
Warn: Project is vulnerable to: GHSA-46fh-8fc5-xcwx
Warn: Project is vulnerable to: GHSA-h5mp-5q4p-ggf5
Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695
Warn: Project is vulnerable to: GHSA-w9mr-4mfr-499f
Warn: Project is vulnerable to: GHSA-4c7m-wxvm-r7gc
Warn: Project is vulnerable to: GHSA-pch5-whg9-qr2r
Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj
Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2
Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Warn: Project is vulnerable to: GHSA-g6ww-v8xp-vmwg
Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-h9rv-jmmf-4pgx
Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
Warn: Project is vulnerable to: GHSA-j44m-qm6p-hp7m
Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442
Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc
Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx
Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6

Score

2.2

/10

Last Scanned on 2025-03-03

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More