Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
marsdb-react
Advanced tools
Declarative data-binding for React based on MarsDB, inspired by Relay, Redux, Flux and Mithril.
MarsDB-React uses Relay-like concept of data reuirements declaration. Just make a component and create a data container below based on the component.
import React from 'react';
import ReactDOM from 'react-dom';
import { createContainer, DataManagerContainer } from 'marsdb-react';
import Collection from 'marsdb';
const MessageModel = new Collection('messages');
class HelloWorld extends React.Component {
handleClickAddMessage = () => {
MessageModel.insert({ text: this.state.text });
this.setState({ text: '' });
};
handleChangeText = (e) => {
this.setState({ text: e.target.value });
};
handleClickMoreLimit = () => {
const { limit } = this.props.variables;
limit(10 + limit());
};
render() {
const { messages, variables } = this.props;
const { limit } = variables;
return (
<div>
<div>
<h3>Add a message</h3>
<input
placeholder="Message text"
value={this.state.text}
onChange={this.handleChangeText}
/>
<button onClick={this.handleClickAddMessage}>Say "hello"</button>
</div>
<div>
<h3>Messages (with limit: {limit()})</h3>
<div><button onClick={this.handleClickMoreLimit}>Limit +10</button></div>
{messages().map(m => (
<p key={m()._id}>"Hello" with message: {m().text}!</p>
))}
</div>
</div>
);
}
}
HelloWorld = createContainer(HelloWorld, {
initialVariables: {
limit: 2
},
fragments: {
messages: ({limit}) => MessageModel.find().limit(limit())
}
});
ReactDOM.render(document.body, (
<DataManagerContainer
component={HelloWorld}
renderLoading(() => <span>Loading...</span>)
/>
))
As you can see, data declaration uses the same fields, that Relay use. But it's plain javascript! There is some things, that should be noticed:
limit()
it returns current value, by calling limit(10)
it sets new one and returns 10.version
variable, that changed when new value is set. It can be used in shouldComponentUpdate
messages()
that returns current list of messages. Each message of the list is also a proprty function!<DataManagerContainer>
component. It resolves all data requests and show a component only when all data received and ready to show.The repository comes with an implementation of TodoMVC. To try it out:
git clone https://github.com/c58/marsdb-react.git
cd marsdb-react/examples/todomvc && npm install
npm start
Then, just point your browser at http://localhost:3000
.
I’m waiting for your pull requests and issues.
Don’t forget to execute gulp lint
before requesting. Accepted only requests without errors.
See License
FAQs
Declarative data-binding for React based on MarsDB
The npm package marsdb-react receives a total of 1 weekly downloads. As such, marsdb-react popularity was classified as not popular.
We found that marsdb-react 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.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.