Missing in Documentation (Readme):

• inject with arguments

a simple plugin functionality could fix some needs to get rid of some boilerplate code if for example a service should trigger a listener, subscribe and unsubscribe automatically on mount and unmount of components. Plugins are more versatile and easier to adapt than application specific code.

This is a replacement for #22

The README.md has to be checked. There is at least one error.

export const TYPE = {
    "MyService" = Symbol("MyService"),
    "MyOtherService" = Symbol("MyOtherService"),
};

should be

export const TYPE = {
    MyService: Symbol("MyService"),
    MyOtherService: Symbol("MyOtherService"),
};

The devDependency @typescript-eslint/parser was updated from 2.7.0 to 2.8.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@typescript-eslint/parser is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

I could need some help with testing and some people doing code review of my own work. Feel free to open Issue, make pull requests or just comment here. :)

The devDependency eslint-plugin-jest was updated from 22.9.0 to 22.10.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

eslint-plugin-jest is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Some bugs causes eslint to fail. Unpin it in package.json after it is working again.

jest-community/eslint-plugin-jest#268

The devDependency eslint-plugin-jest was updated from 22.6.1 to 22.6.2.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

eslint-plugin-jest is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

The devDependency @types/jest was updated from 24.0.19 to 24.0.20.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@types/jest is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

People suggested to add some inline documentation because they have problems to understand how the library works. This should be fixed.

• Check Documentation if everything is correct
• Remove the beta "unstable" info from documentation
• Set package.json version to 1.0.0
• Tag and deploy to npm

Add all needed unit tests

• get the dependency from the container only once
• listen on rebinds to delete the cached dependency so it will reresolved on next get

Is your feature request something you would just nice to see implemented?
It would be nice if a dependency which got injected will not resolve on every call on the propery which resolves the dependency. It would be nice too if this behavior can be configured.

Describe the solution you'd like
I am not shure which solution i wuld prefer. For myself i normaly use dependencies in singelton scope. But sometimes it could be usefull to resolve a dependency only once per instance. And this feature will improof performance too if caching is the default behavior.

Question

Which implementation whould you prefer? Or keep the current state? Or any other suggestion?

• deploy with travis to npmjs no automatic deployment at the moment
• Check example implementation
• Update documentation

The devDependency @typescript-eslint/eslint-plugin was updated from 1.9.0 to 1.10.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@typescript-eslint/eslint-plugin is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Id like to be able to inject a class that requires arguments for it's constructor which would give more flexibility for some use cases.

Describe the solution you'd like
I think a rework of the Factory type could do the trick, for now it doesn't accept any parameters 🤔
the idea, if possible, would be to usesomething like this
container.bind(<symbol>).toFactory( (...args: InjectedConstructorArgs) => new Injected(...args)) )
and then
resolveContainer(<symbol>)(...args)

Describe alternatives you've considered
put the constructor logic in another function that is called manually after injection

Hi, i use @owja/ioc in Node.js app.

In my app i have a service (for example named MyService) that has one dependency.

I use wire function for define dependency.

In my case i have two containers in two apps and i want to use MyService in both of containers

But the wire function is created for a specific container strictly binds each service to the container.

In my case i act like this:

const createMyService = wire => class MyService {
  constructor () {
    wire(this, 'myDependency', TYPE.myDependency)
  }
};

But it looks more like a trick.

How can i properly create service for use it in any container?

• Add ESLint
• Lint all js/ts files

The devDependency eslint-plugin-jest was updated from 22.5.1 to 22.6.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

eslint-plugin-jest is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Make it possible to bind in in singleton scope.

• .to().inSingeltonScope()
• .toFactory().inSingeltonScope()

.toValue() is not affected.

Hey, I might need to download a bundle containing a service when resolving it so I need a way to .get asynchronously and have async factories (like in InversifyJS for example).

Alternatively if plugins could return a Promise I guess that would also work for this use case.

This should also be possible:

@inject(SERVICE, TAG);

Currently tags hav to be a array:

@inject(SERVICE, [TAG]);

Describe the bug
The Container.bind(...).toValue(...) consider the a given function as a fatory.

To Reproduce

import { Container, token } from "@owja/ioc"
const TYPE = {
  myType: token("MyType")
}
const container = new Container()
container.bind(TYPE.myType).toValue((text) => {
  if (text === undefined) console.log("You cannot give undefined.")
  else console.log(text)
})
const myFunc = container.get(TYPE.myType)
myFunc("hello, world!")

the console output is

You cannot give undefined.
file:///test.js:11
myFunc("hello, world!")
^

TypeError: myFunc is not a function

Expected behavior
I want to bind a Getter function, such as (options) => create(options) with toValue, however, the container considered it as a factory and tried to call it and retrieved the return value.

I don't think toValue() should detect its type under the hood, which made me confused.
Instead, toFactory() is more suitable for this.

Environment (please complete the following information):

• typescript^4.9.5
• Node v16.18.0
• ^2.0.0-alpha.6

Additional context
The workaround is to wrap the function with a new function.

container.bind(TYPE.myType).toValue(() => (text) => {
  if (text === undefined) console.log("You cannot give undefined.")
  else console.log(text)
})

But it makes the typing sucks in typescript.
Because the token should be token<()=>(text:string)=>void>("MyType"), then the return value from container.get(...) is typed by ()=>(text:string)=>void but (text:string)=>void is actually expected.

This is how I personally like to use this library in my project:

import {Container} from "@owja/ioc";
const container = new Container();

const BAR = Symbol.for("bar")
const FOO = Symbol.for("foo")

interface Foo {
  doThing(): void
  tellBarToDoThing(): void 
}

class AppFoo implements Foo {
  constructor(private bar: Bar = container.get(BAR)) {}

  doThing(): void {
    console.log('foo do thing')
  }

  tellBarToDoThing() {
    this.bar.doThing()
  }
}

container.bind<Foo>(FOO).to(AppFoo)
interface Bar {
  doThing(): void 
  tellFooToDoThing(): void
}

class AppBar implements Bar {
  constructor(private foo: Foo = container.get(FOO)) {}
  doThing() {
    console.log('bar do thing')
  }

  tellFooToDoThing() {
    this.foo.doThing()
  }
}

// You don't need to use `toFactory()` below, but here just for example sake. 
container.bind<Bar>(BAR).toFactory(() => { return new AppBar() }).inSingletonScope() 

let foo: Foo = container.get(FOO)
foo.doThing()

let bar: Bar = container.get(BAR)
bar.doThing()

The code to look at here is the constructors of the classes. This is how I like to resolve the dependencies for my classes instead of wire() or resolve() that the readme suggests.

Wanted to see what you thought. Do you see anything wrong with this? Do you see it as a value add to add this technique to the readme as another option to resolving dependencies?

• Add microbundle
• Add travis build

Allready in progress: #51

Hi, first of all thanks for pretty good library.

I noticed that container can have an implicit behaviour.

According to api, i can bind service to symbol and save options to the variable.
Later I can start get services from the container by symbol.
But after that I can use options to change type of service by options.toSingletonScope()

After changing service type I will receive only one instance.

I don't know, maybe it is a regular behaviour but it can confuse the developer.

Maybe I'm wrong and this behaviour implies that at the time of binding, the developer may not know what the service should be.

P.S. Sorry for bug label...

The devDependency @typescript-eslint/eslint-plugin was updated from 2.10.0 to 2.11.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@typescript-eslint/eslint-plugin is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

The devDependency @typescript-eslint/parser was updated from 1.9.0 to 1.10.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@typescript-eslint/parser is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Hello,

First of all, I want to thank you for your awesome project !

I'm currently using the version 2.0.0-alpha.3 on a REACT game project.

For my project I would like to be able to test multiple JSX versions of the same component on the fly.

I'd like for all my components to come with a SVG version, a WebGL and canvas one.
For this issue I assumed I have two redering method svg and svg2 (canvas and webGL cause issues due to useEffect being used).

I have the logic for my component in a vanilla class and injected render method based on a token.

I think (and hope) the code is kinda self explanatory.

Here are the files I use for now

• container.ts containing tokens for the rendering methods.

export type renderingMethods = 'canvas' | 'svg' | 'svg2' | 'webGL';

const container = new Container();
export const resolve = createResolve(container);
export const get = container.get;

export const RENDERERS: { [K in renderingMethods]: Token<FunctionComponent<Props>> } = {
  canvas: token('canvas'),
  svg: token('svg'),
  svg2: token('svg2'),
  webGL: token('webGL')
};

container.bind(RENDERERS.canvas).toValue(BoardCanvas);
container.bind(RENDERERS.svg).toValue(BoardSVG);
container.bind(RENDERERS.svg2).toValue(BoardSVG2);
container.bind(RENDERERS.webGL).toValue(BoardWebGL);

• App.tsx with a select in the header to choose the rendering method.

function App() {
  const board = new Board({ x: 200, y: 200 });
  const [renderer, setRenderer] = useState<renderingMethods>('svg');

  return (
    <>
      <header>
        <label>
          Rendering Method
          <br />
          <select value={renderer} onChange={({ target: { value } }) => setRenderer(value as renderingMethods)}>
            <option value="canvas">Canvas</option>
            <option value="svg">SVG</option>
            <option value="svg2">SVG2</option>
            <option value="webGL">WebGL</option>
          </select>
        </label>
        {renderer}
      </header>
      <div className="App">{board.render(renderer)}</div>
    </>
  );
}

• Board.ts

export class Board implements board {
  bounds: BoardRanges;

  constructor(bounds: BoardRanges) {
    this.bounds = {
      x: Math.abs(bounds.x),
      y: Math.abs(bounds.y)
    };
  }

  readonly render = (renderer: renderingMethods) => resolve(RENDERERS[renderer])()({ bounds: this.bounds });
}

• the svg renderer

export const BoardSVG: FunctionComponent<Props> = ({ bounds }: Props) => {
  console.log('using board svg');
  return (
    <svg width={bounds.x} height={bounds.y} className="game-board">
      <g transform={`matrix(1 0 0 -1 ${bounds.x / 2} ${bounds.y / 2})`}>
        <line x1={-bounds.x / 2} x2={bounds.x / 2} strokeWidth="1px" stroke="#000" />
        <line y1={-bounds.y / 2} y2={bounds.y / 2} strokeWidth="1px" stroke="#000" />
      </g>
    </svg>
  );
};

• the svg2 renderer

export const BoardSVG2: FunctionComponent<Props> = ({ bounds }: Props) => {
  console.log('using board svg2');
  return (
    <svg width={bounds.x} height={bounds.y} className="game-board">
      <g transform={`matrix(1 0 0 -1 ${bounds.x / 2} ${bounds.y / 2})`}>
        <line x1={-bounds.x / 2} x2={bounds.x / 2} strokeWidth="1px" stroke="#333" />
        <line y1={-bounds.y / 2} y2={bounds.y / 2} strokeWidth="1px" stroke="#333" />
      </g>
    </svg>
  );
};

the UI/injection doesn't seem to reload as it always giving me the console.log('using board svg'); output.

I'm not really sure if it's a problem with the lib or with me not doing things correctly

create a new repository with examples

• ...for javascript
• ...for typescript