Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
inversify-props
Advanced tools
Readme
This package is a wrapper of Inversify to simplify how inject your dependencies with property decorators in the components, made with TypeScript and compatible with Vue, React and other component libraries.
Do you use Hooks? You can try the experimental package inversify-hooks
$ npm install inversify-props reflect-metadata --save
The inversify-props type definitions are included in the inversify-props npm package.
import 'reflect-metadata'; // Import only once
import { container, inject } from 'inversify-props';
container.addSingleton<IService1>(Service1);
container.addSingleton<IService2>(Service2);
container.addSingleton(Service3);
export default class extends Component {
@inject() service1: IService1;
@inject() _service2: IService2;
@inject() Service3: IService3;
}
import 'reflect-metadata'; // Import only once
import { cid, container, inject } from 'inversify-props';
container.addSingleton<IService1>(Service1, 'MyService1');
// You can inject in other services as a Prop
export class MyOtherService {
@inject() private service1: IService1;
}
// Also in the constructor as a param
export class MyOtherService {
constructor(@inject() private exampleService: IExampleService) {}
}
// Or in any function as a variable
export function myHelper() {
const service1 = container.get<IService1>(cid.IService1);
}
// camelCase, PascalCase and _ are allowed
export class MyOtherService {
@inject() private service1: IService1;
@inject() private _service1: IService1;
@inject() private Service1: IService1;
@inject() private _Service1: IService1;
}
import 'reflect-metadata'; // Import only once
import { container, inject } from 'inversify-props';
container.addSingleton<IService1>(Service1, 'MyService1');
export default class extends Component {
@inject('MyService1') service1: IService1;
}
import 'reflect-metadata'; // Import only once
import { Container, inject, setContainer } from 'inversify-props';
setContainer(new Container());
container.addSingleton<IService1>(Service1, 'MyService1');
export default class extends Component {
@inject('MyService1') service1: IService1;
}
:warning: Important! inversify-props requires TypeScript >= 2.0 and the
experimentalDecorators
,emitDecoratorMetadata
,types
andlib
compilation options in yourtsconfig.json
file.
{
"compilerOptions": {
"target": "es5",
"lib": ["es6"],
"types": ["reflect-metadata"],
"module": "commonjs",
"moduleResolution": "node",
"experimentalDecorators": true,
"emitDecoratorMetadata": true
}
}
The idea is to add a simple wrapper that helps us to inject dependencies in components using property decorators
, we have also extend a little inversify
adding some methods that make our experience injecting dependencies easier.
You probably don't need this if:
Inversify needs an id to register our dependencies, this wrapper is going to do this for you 'magically' but if you want to uglify the code, keep reading the docs 🤓.
First of all create a class and an interface with the public methods of your class.
// iservice1.ts
export interface IService1 {
method1(): string;
}
// service.ts
export class Service1 implements IService1 {
method1(): string {
return 'method 1';
}
}
Now is time to register the service in the container, we usually do that in app.container.ts
or app.ts
.
container.addSingleton<IService1>(Service1);
There are some helper functions to test, the recommended way to test is beforeEach test:
beforeEach(() => {
resetContainer();
containerBuilder();
mockSingleton<IHttpService>(cid.IHttpService, HttpServiceMock);
});
As inversify accepts, we have configured three types of registration.
Once your dependencies are registered in the container, is simple as create a property with the name and the interface.
export default class extends Component {
@inject() service1: IService1;
}
Note: Part of the magic is that the name of the property has to be the name of the interface, this is how we don't need to add the
id
.
If you want to use Uglify or Terser to obfuscate the code, you will need to add this options to preserve the names of the classes (we need them to generate the ids magically
😉).
new UglifyJSPlugin({
uglifyOptions: {
keep_classnames: true,
keep_fnames: true
}
});
new TerserPlugin({
terserOptions: {
keep_classnames: true,
keep_fnames: true
}
});
FAQs
Wrapper to use inversify as property decorator with TypeScript, useful for component libraries like Vue, React or LitElement
The npm package inversify-props receives a total of 4,455 weekly downloads. As such, inversify-props popularity was classified as popular.
We found that inversify-props demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.