CKGrafico / inversify-props

Wrapper of Inversify to inject your dependencies in the components, made with TypeScript and compatible with Vue, React and other component libraries.
MIT License
85 stars 9 forks source link

Inject decorator doesn't work in javascript #37

Open dirodriguezm opened 3 years ago

dirodriguezm commented 3 years ago

Hello, first I want to say thanks for this tool.

I'm making some sample projects to use inversify-props with Nuxt, both in Typescript and Javascript. I've succsesfully achieved what I wanted to try in this sample repo with Typescript.

The thing is that when I try to use @inject('SomeService') someService in a javascript es6 class, the property is not created (someService is undefined), but if I use someService = container.get(cid.SomeService) then it works fine.

I don't know if it's my fault or something else.

All help would be appreciated, thanks in advance !

CKGrafico commented 3 years ago

Hello and thanks for your issue, did you try @inject(cid.SomeService) someService? Can you create a sandbox to reproduce the issue?

dirodriguezm commented 3 years ago

Hi, thanks for the reply. I was a bit wrong, I just discovered that it works with regular es6 classes but not with Vue classes decorated with vue-class-component or vuex store modules decorated with vuex-module-decorators.

Also, note that it works fine with typescript in decorated vue components.

I have a repository with a demo. As you can see I have this class that is working fine:

export class Storage {
  @inject('StoreCreator') storeCreator

  getStores() {
    const store = this.storeCreator.makeStore()
    return { sampleStore: getModule(SampleStore, store) }
  }
}

But if I try to inject into this Vuex module, it wont work, and have to use container.get like this:

@Module({
  namespaced: true,
  stateFactory: true,
  name: 'sample',
})
class SampleStore extends VuexModule {
  // @inject(cid.SampleService) sampleService <--- sampleService undefined
  sampleService = container.get(cid.SampleService)
  greeting = ''

  @VuexMutation
  setGreeting(greeting) {
    this.greeting = greeting
  }

  @VuexAction({ rawError: true })
  useService() {
    this.setGreeting(this.sampleService.sayHi())
  }
}

It's not that I can't use it that way, but it would be nice to keep a consistent usage in all classes with inject. I don't know if this is something that can be fixed, but if you can think on a solution, please tell me.

Thanks again.

CKGrafico commented 3 years ago

mmm I've to admit that I didn't checked with vue, if you can prepare the sandbox I'll check soon sorry!