Uncino 🪝 Fast, tiny and solid hooks system for Javascript and NodeJS

Riccardo Tartaglia — Thu, 01 Sep 2022 11:47:38 GMT

Uncino is italian word for hook

Do you know Wordpress hooks system? Uncino is a hooks system highly inspired to it!

Async / Await support
Node or Browser support
Actions / Hooks system
Easy to use
No Dependencies

Philosophy

Uncino permit to your code to interact/modify another piece of code at specific, pre-defined spots.

Uncino has two types of hooks: Actions and Hooks. To use either, you need to write a custom function, and then register for a specific action or hook.

Actions allow you to add data or change how your code operates. Actions will run at a specific point in the execution. Callback functions for Actions can perform some kind of a task, like echoing output to the user or inserting something into the database. Callback functions for an Action do not return anything back to the calling Action hook.

Hooks give you the ability to change data during the execution of your code. Callback functions for Filters will accept a variable, modify it, and return it. They are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. Filters expect to have something returned back to them.

With Uncino you can create your own hook spots so that other developers can extend and modify your code or you can create your pluggable core.

Pull Requests?

I'd love them!

Comments?

Let's hear them! (The nice ones please!)

Me?

In case you're interested I'm @riktarweb

React Holmes 🔍 - Elementary State Orchestrator for React

Riccardo Tartaglia — Fri, 27 May 2022 09:39:29 GMT

React Holmes is a 0 config, fast and elementary state orchestrator for React.

Holmes has a very minimal API. It is as simple to use as React’s integrated hooks, but all state is globally accessible.

💡 Easy as React state hooks

🔄 State synchronization between components

🛰️ Distributed and not centralized state

🤯 No mutable objects

🚀 Fast

React Holmes on Github

Motivation

React components has a built-in state object, where you store property values that belongs to the component.

When the state object changes, the component re-renders.

This behaviour has certain limitations:

Component state can only be shared by pushing it up to the common ancestor, but this might include a huge tree that then needs to re-render. React-Holmes adopts a new vision when talking about state handling.

As other state managers use an external single source of truth to hydrate app client on state change, React-Holmes does not create an external store and does not need to wrap your app in a context.

So, where is the global state? There is no global state, actually. The state is decentralized into components themselves.

The ONLY differences are the hook declared for state management and a key to identify state chunk.

While to declare a React state we need to declare it as:

const [state, setState] = React.useState('test');

with React-Holmes we need to declare it as:

const [state, setState] = useHolmesState('key', 'test');

What does useHolmesState do? When a state is set with useHolmesState, the hook is responsible to set state with React and add some power ups to it.

In fact, when a component using useHolmesState is mounted, it will create (if not exists) a new RxJs Observable identified by specified key.

If we register another component with the same key, it will not create another Observable, instead it will subscribe to existing one, allowing access to its value and its callback to mutate the state.

This allows state handling to be delegated to React itself, guaranteeing reactish updates and shared state too.

So React-Holmes can be considered a React state orchestrator because its hooks can be used into very small and deeply nested components without performance impacts generated by multiple re-renders.