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.
frint-component-utils
Advanced tools
Changelog
Readme
Component utils package of Frint
This package is aimed at enabling other reactive rendering/templating libraries integrate with FrintJS, and not to be used directly by developers in their applications.
For example, take a look at frint-react
for its implementation using this package internally.
With npm:
$ npm install --save frint-component-utils
Handlers concept follows a spec for the lifecycle of a reactive component, without tying itself to any specific library (like React or Vue). They are basically just objects with functions, which will be exposed as methods when composed together into a single instance.
This enables other libraries to integrate with FrintJS as easily as possible. The monorepo here will always provide the handlers logic for maintaining the same behaviour, while others can start implementing these handlers with their preferred rendering library (Vue or Preact for example).
Within the monorepo, we will be consuming these handlers ourselves too to create React-specific packages.
This is the default handler interface which other handlers are expected to implement as needed:
{
// options
app: null,
component: null,
// lifecycle: creation
initialize() {},
beforeDestroy() {},
// data
getInitialData() {},
setData(key, value) {},
setDataWithCallback(key, value, cb) {},
getData(key) {},
// props
getProp(key) {},
getProps() {},
// lifecycle: mounting
beforeMount() {},
afterMount() {},
// lifecycle: re-rendering
beforeUpdate() {},
shouldUpdate(nextProps, nextData) {},
afterUpdate() {},
// other
getMountableComponent(app) {}
}
For example, frint-react
has an implementation of the handler targeting React. And it was done as follows:
{
setData(key, value) {
this.component.setState({
[key]: value,
});
},
setDataWithCallback(key, value, cb) {
this.component.setState({
[key]: value,
}, cb);
},
getData(key) {
return this.component.state[key];
},
getProps() {
return this.component.props;
},
getProp(key) {
return this.component.props[key];
}
}
You can also see how multiple handlers are composed together and implemented in Region
and observe
Components in frint-component-handlers
and frint-react
packages.
DefaultHandler
The interface of a default handler object, that other handlers are expected to override.
composeHandlers(...handlers)
handler
(Object
): with functions to override from default/previous handlers.Handler
: Instance of handler after composing with all handlers.
streamProps(defaultProps = {})
Helper function, for composing your props inside observe
, and then generating and returning an single Observable
.
defaultProps
(Object
[optional]): Default props to start with.Streamer
instance that implements these methods below:
All set*
methods return the same Streamer
instance so multiple set calls can be chained in one go.
set(key, value)
set(plainObject)
set(observable$, ...mapperFunctions)
setKey('key', 'value')
setPlainObject({ key: 'value' })
setObservable(observable$, ...mapperFunctions)
You can set as many mapper functions until you reach a value of your needs.
setObservable(
observable$,
props => props, // no modification
propsAgain => modifiedProps // with modification
)
setDispatch(actionCreators, store)
setDispatch({
incrementCounter: incrementCounter,
decrementCounter: decrementCounter,
}, store)
get$()
Returns an Observable
.
FAQs
Component utils package for Frint
The npm package frint-component-utils receives a total of 218 weekly downloads. As such, frint-component-utils popularity was classified as not popular.
We found that frint-component-utils demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 8 open source maintainers 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.