Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-services-injector

Package Overview
Dependencies
Maintainers
1
Versions
19
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-services-injector - npm Package Compare versions

Comparing version 0.2.0-beta.10 to 1.0.0-rc.1

.babelrc
.npmignore
dist/index.js

114

index.js

@@ -1,5 +0,5 @@

let Service = function() {
let Service = function () {
this.services = {};
this.servicesDidRegistered = () => {
this.servicesDidRegister = () => {
this.services = injector.get();

@@ -9,2 +9,22 @@ }

class Helpers {
static isGetter(descriptor) {
return typeof descriptor.get === 'function';
}
static isSetter(descriptor) {
return typeof descriptor.set === 'function';
}
static isFunction(descriptor) {
return Helpers.isGetter(descriptor) || Helpers.isSetter(descriptor) || typeof descriptor.value === 'function';
}
static getDescriptors(fn) {
return Object.getOwnPropertyNames(fn.prototype).map(field =>
({name: field, descriptor: Object.getOwnPropertyDescriptor(fn.prototype, field)})
);
}
}
class Injector {

@@ -17,4 +37,6 @@ constructor() {

updateComponents() {
return Promise.all(this.components.map(component => {
updateComponents(calledBy) {
return Promise.all(this.components.filter(component => {
return component.toRender.indexOf(calledBy) !== -1;
}).map(component => {
return new Promise(resolve => {

@@ -29,20 +51,26 @@ component.instance.forceUpdate.call(component.instance, resolve);

let instance = new service();
let methods = Object.getOwnPropertyNames(Object.getPrototypeOf(instance));
let prototype = service.prototype;
let methods = Helpers.getDescriptors(service);
methods.forEach(method => {
if (method === 'constructor' || method.indexOf('get') === 0 || method.indexOf('_') === 0)
const {descriptor} = method;
if (!Helpers.isFunction(descriptor) || descriptor.value === service)
return;
instance['__' + method] = instance[method];
if (Helpers.isGetter(descriptor))
return;
instance[method] = function (...args) {
let result = instance['__' + method].apply(instance, args);
const fn = instance[method.name];
return self.updateComponents()
instance[method.name] = (function (...args) {
let result = fn.apply(instance, args);
return self.updateComponents(instance)
.then(() => result);
};
}).bind(instance);
});
instance.$update = function () {
self.components.forEach(component => component.instance.forceUpdate.call(component.instance));
return self.updateComponents(instance);
};

@@ -53,3 +81,6 @@

get() {
get(arrayFormat) {
if (arrayFormat)
return this.services.map(service => service.instance);
return this.services.reduce((obj, service) => Object.assign(obj, {

@@ -60,22 +91,40 @@ [service.name]: service.instance

byName(name) {
const services = injector.get();
const service = services[name];
if (!service)
throw new Error(`Unable to find service "${name}".`);
return service;
}
toObject(services) {
return services.reduce((store, service) => Object.assign(store, {[service.constructor.name]: service}), {});
}
register(data) {
if (Array.isArray(data)) {
data.forEach(item => this.services.push({name: item.name, instance: this.createInstance(item.service)}))
data.forEach(item => this.services.push({name: item.name, instance: this.createInstance(item)}))
} else {
this.services.push({name: data.name, instance: this.createInstance(data.service)});
this.services.push({name: data.name, instance: this.createInstance(data)});
}
this.services.forEach(service => service.instance.servicesDidRegistered.apply(service.instance));
this.services.forEach(service => {
if (!service.instance.serviceDidConnected)
return;
service.instance.serviceDidConnected.apply(service.instance);
});
this.services.forEach(service => service.instance.servicesDidRegister.apply(service.instance));
this.services.forEach(service => service.instance.serviceDidConnect && service.instance.serviceDidConnect.apply(service.instance));
}
connectInstance(instance) {
connectInstance(instance, options) {
const services = injector.get(true);
const toRender = Array.isArray(options && options.toRender) ? options.toRender.map(this.byName) : options ? [] : services;
const toUse = Array.isArray(options && options.toUse) ? options.toUse.map(this.byName) : options ? [] : services;
instance.services = Object.assign(this.toObject(toRender), this.toObject(toUse));
this.components.push({
key: ++this.key,
instance
instance,
toRender,
toUse
});

@@ -95,3 +144,3 @@

connect(component) {
connect(component, options) {
class ConnectedComponent extends component {

@@ -103,4 +152,3 @@ constructor(props) {

componentWillMount() {
this.__injector_key = injector.connectInstance(this);
this.services = Object.assign({}, injector.get());
this.__servicesInjectorKey = injector.connectInstance(this, options);

@@ -112,3 +160,3 @@ if (super.componentWillMount)

componentWillUnmount() {
injector.disconnectInstance(this.__injector_key);
injector.disconnectInstance(this.__servicesInjectorKey);

@@ -118,8 +166,10 @@ if (super.componentWillUnmount)

}
static get name() {
return component.name;
}
}
try {
Object.defineProperty(ConnectedComponent, 'name', {
get: () => component.name
});
} catch (e) {}
return ConnectedComponent;

@@ -126,0 +176,0 @@ }

2

LICENSE.txt

@@ -5,2 +5,2 @@ Copyright 2017 Efog

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

24

package.json
{
"name": "react-services-injector",
"version": "0.2.0-beta.10",
"version": "1.0.0-rc.1",
"description": "A library to create and use sigleton-services in your React application.",
"main": "index.js",
"main": "dist/index.js",
"scripts": {
"test": "npm test"
"build": "babel index.js > dist/index.js"
},

@@ -15,5 +15,7 @@ "repository": {

"react",
"data",
"service",
"singleton",
"injector"
"services",
"storage",
"singleton"
],

@@ -25,3 +27,13 @@ "author": "Efog <efog@yandex.com>",

},
"homepage": "https://github.com/EfogDev/react-services-injector#readme"
"homepage": "https://github.com/EfogDev/react-services-injector#readme",
"devDependencies": {
"babel": "^6.23.0",
"babel-cli": "^6.24.1",
"babel-plugin-es6-promise": "^1.1.1",
"babel-plugin-transform-object-assign": "^6.22.0",
"babel-preset-es2015": "^6.24.1"
},
"dependencies": {
"es6-promise": "^4.1.1"
}
}

186

README.md
React Services Injector
===================
Got tired with Redux? Really hate that `ACTION_THAT_DOES_SOME_ACTION: "ACTION_THAT_DOES_SOME_ACTION"`? Or maybe you are used to be an Angular-developer? So then you definitely should try some services in React!
Got tired with Redux? Or maybe you are used to be an Angular-developer? Then you definitely should try some services in React!
The library helps you to connect components one to each other and create shared stores.
Data flow and principles
-------------
The main principle of services injector is to update components automatically each time you change any data so you don't need to control that process. Also, the library written in the as-simple-as-possible way: it doesn't require you to write tons of code (as `redux` does (sorry, I hate `redux`)).
Installation

@@ -11,30 +16,53 @@ -------------

-------------
At first, create your first service (`services/storage.js`):
To start, create your first service (`services/storage.js`):
```javascript
import {Service} from 'react-services-injector';
export default class Storage extends Service {
constructor() {
this.filter = '';
this.products = [];
}
class Storage extends Service {
constructor() {
super();
this.changeNumber();
}
addProduct({name, price}) {
this.products.push({name, price});
}
changeNumber() {
this.randomNumber = Math.random();
}
setFilter(filter = '') {
this.filter = filter;
}
get number() {
//we can store pure data and format it in getters
return Math.floor(this.randomNumber * 100);
}
}
getFiltered() {
return this.products.filter(product => {
return (product.name || '').toLowerCase()
.indexOf(this.filter.toLowerCase()) === 0;
}) || [];
}
export default Storage;
```
> **Important!** You should use getters for any methods, that are not modifying any data in the service. If you use common function for that purpose, it may result into an infinite loop. Any non-getter methods of service will update components that specified the service in their `toUse` or `toRender` options.
Then, let's create a service that will automatically update the random number (`services/intervalService.js`):
```javascript
import {Service} from 'react-services-injector';
class IntervalService extends Service {
constructor() {
super();
this.enabled = false;
}
toggle() {
this.enabled = !this.enabled;
}
serviceDidConnect() {
const {Storage} = this.services;
setInterval(() => this.enabled && Storage.changeNumber(), 1000);
}
}
export default IntervalService;
```
> **Important!** Methods that are not changing anything should be named as `getSomething`, starting with `get` keyword (don't get confused with getters). Also such methods may start from `_` character.
> **Important!** Any non-getter methods of service always returns promise. ALWAYS! Even if you return a pure number, you will have to use `.then()` in a component or another service to get value.

@@ -44,13 +72,12 @@ Create an `index.js` in your `services` directory to export them all:

import Storage from './storage';
import IntervalService from './intervalService';
export default [{
name: 'storage',
service: Storage
}];
//always export array, even if you have only one service
export default [Storage, IntervalService];
```
Then register your service in the main file (`app.js`):
Register your service in the main file (`app.js`):
```javascript
import React from 'react';
import { render } from 'react-dom';
import {render} from 'react-dom';
import Root from './containers/Root';

@@ -65,3 +92,3 @@

render(<Root />,
document.getElementById('root')
document.getElementById('root')
);

@@ -72,36 +99,57 @@ ```

```javascript
import React from 'react';
import {injector} from 'react-services-injector';
import Test from './Test';
class ProductTable extends React.Component {
constructor(props) {
super(props);
class App extends React.Component {
render() {
const {Storage} = this.services;
this.addRandomProduct = this.addRandomProduct.bind(this);
}
return (
<h2>
The random nubmer is: {Storage.number}
addRandomProduct() {
this.services.storage.addProduct({
name: 'Test product',
price: Math.floor(Math.random() * 250) + 50
});
}
<Test /> //definition below
</h2>
);
}
}
render() {
let {storage} = this.services;
export default injector.connect(App, {
toRender: ['Storage'] //we only need Storage in the component
});
```
> **Important!** Second argument of `injector.connect` is object containing two arrays: `toRender` and `toUse`. `toRender` should contain names of services that render result of component depends on. Other services that you use in the component should be in the `toUse` array.
> **Note:** you shouldn't use services in the class constructor. You can't to, actually. Use it, for example, in the `componentWillMount` lifecycle method if you need something to be done once component is created.
return (
<div>
{storage.getFiltered().map((product, index) =>
<Product key={index} data={product} />
)}
Here is our `Test` component:
```javascript
import React from 'react';
import {injector} from 'react-services-injector';
<button onClick={() => this.addRandomProduct()}>Add</button>
</div>
)
}
class Test extends React.Component {
render() {
const {Storage, IntervalService} = this.services;
return (
<div>
<button onClick={() => Storage.changeNumber()}>
Generate number
</button>
<button onClick={() => IntervalService.toggle()}>
Auto-generation:
{IntervalService.enabled ? 'ENABLED' : 'DISABLED'}
</button>
</div>
);
}
}
export default injector.connect(ProductTable);
export default injector.connect(Test, {
toRender: ['IntervalService'], //render result depends only on IntervalService
toUse: ['Storage'] //but we also need to use Storage
});
```
> **Important!** You definitely shouldn't use services in constructor. You can't to, actually. Use it, for example, in the `componentWillMount` lifecycle method if you need something to be done once component is created.

@@ -112,18 +160,25 @@ You can also use services in another services in the same way in any method except `constructor`.

--------------
If you need to do some initialization of your service (probably asynchronous), you can use `serviceDidConnected` lifecycle method of service. That is the only lifecycle method so far.
If you need to do some initialization of your service (probably asynchronous), you can use `serviceDidConnect` lifecycle method of service. That is the only lifecycle method so far.
Behavior
===
========
#### Data modifying
Never modify service fields from outside! Make a method for that. Don't use setters.
#### Data storing
It's better (not always) to store pure data in the service class and format it in getters.
#### Singletons
Services are singletons, so you can use your service in multiple components with the same data.
Services are singletons, so you can use your service in multiple components to store/get/modify any data.
#### Asynchronous actions
If you want to do some asynchronous stuff if your service, please use `this.$update()` after it is done (remember `$scope.$apply()`, huh?) For example:
If you want to do some asynchronous stuff (like http requests or `setTimeout`) if your service, please use `this.$update()` after it is done (remember `$scope.$apply()`, huh?)
For example:
```javascript
addProduct({name, price}) {
setTimeout(() => {
this.products.push({category, name, price, stocked});
this.$update(); //here is it
}, 200);
changeNumber() {
httpGet('/number')
.then(number => {
this.randomNumber = number;
this.$update();
})
}

@@ -134,4 +189,13 @@ ```

#### `toRender` and `toUse`
It's not important, but strongly recommended to pass options object to the `connect()` method.
If you don't pass it, the component will be connected to all services.
If you do pass, but don't specify one of `toRender` or `toUse` arrays, component will be connected only to specified services.
#### Dependencies
`require()` function should be supported in the project.
Recommended bundler is `webpack`.
#### Troubleshooting
Please, feel free to create an issue any time if you found a bug or unexpected behavior.
Feature requests are pretty much acceptable too.
.idea/jsLibraryMappings.xml
.idea/misc.xml
.idea/modules.xml
.idea/react-services-injector.iml
.idea/vcs.xml
.idea/watcherTasks.xml
.idea/workspace.xml
index.es5.js
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc