DEV Community: Raghav Misra

Senko - easy global state in react

Raghav Misra — Sun, 25 Apr 2021 03:35:23 +0000

Straightforward global state in React.

This project is a work-in-progress, so feel free to contribute. :D
Feedback much, much appreciated!

Why Senko?

When writing React apps, global state management becomes a larger concern than it should be. Enter Senko, an easy state management solution with a lot of power.

Let's look at a simple example:

import React from "react";
import senko from "senko";

const useStore = senko({ count: 0 });

function Counter() {
    const store = useStore();

    return <>
        <code>{store.count}</code>
        <button onClick={() => store.count++}>up</button>
        <button onClick={() => store.count--}>down</button>
    </>;
}

The useStore hook that is returned from the senko(...) call can be called from any component, and they will all refer to the same state.

Features:

First-class Typescript support ~~(like really first class)~~.
Multiple senko calls can be used to make isolated stores that can then be used in any component.
Really straightforward, no top-level provider wrappers, etc.

Check it out!

Github | npm i senko

Let's build an example:

Scaffold an app with CRA

npx create-react-app senko-test --template=typescript
(feel free to follow along with JS instead)

Restructure files & folders

Delete everything in /src
Create the following files in /src:
- index.tsx
- store.ts

`yarn add senko`

No senko app is complete without senko!

Write the store

Inside store.ts, throw the following.
I've added comments to walk you through it.

// No senko app is complete without senko!
import senko from "senko";

// We're gonna have a signup form:
// Pass in the initial state to the senko function:
export const useStore = senko({
    username: "",
    email: "",
    password: ""
});

// Oh also you can use a default export instead,
// I'm just not a big fan xD.

Write the frontend

Okay, now that the store is done, we can write the actual React code.

Here's a template so you don't need to write the small stuff:

import React from "react";
import ReactDOM from "react-dom";
import { useStore } from "./store";

function Form() {
}

ReactDOM.render(<Form />, document.querySelector("#root"));

Now, we have the basic stuff in place, let's dive into writing the Form component.

function Form() {
    return (
        <form>
            <label>Username:</label>
            <input 
                type="text"
                placeholder="CoolGuy1234" 
            />

            <label>Email:</label>
            <input 
                type="email" 
                placeholder="coolguy1234@gmail.io" 
            />

            <label>Password:</label>
            <input 
                type="password"
                placeholder="Shhhhhhhhh!" 
            />

            <button type="submit">Signup!</button>
        </form>
    );
}

There's our form structure (not a great-looking one, but it's there).

Two-way binding

Now let's look at binding these inputs to the store.

function Form() {
    const store = useStore(); // we imported this before

    /* omitted for brevity */
}

Usually, a two-way binding would like this:

<input 
    value={store.username} 
    onInput={e => store.username = e.target.value} 
/>

However, with a Senko store, you can use our two-way binding helper:

<input {...store.model.username()} />

Basically use store.model.thePropYouWantToBindTo (in our case: username, email, and password).

These bindings in our Form component would look like:

function Form() {
    const store = useStore();

    return (
        <form>
            <label>Username:</label>
            <input 
                type="text"
                placeholder="CoolGuy1234" 
                {...store.model.username()}
            />

            <label>Email:</label>
            <input 
                type="email" 
                placeholder="coolguy1234@gmail.io" 
                {...store.model.email()}
            />

            <label>Password:</label>
            <input 
                type="password"
                placeholder="Shhhhhhhhh!" 
                {...store.model.password()}
            />

            <button type="submit">Signup!</button>
        </form>
    );
}

Finishing up

How do we know this two-way binding actually works?

Let's add a submit event to our form and prove it!

function Form() {
    const store = useStore();

    const onLogin: React.FormEventHandler = (e) => {
        e.preventDefault();
        console.log(
            "You signed up with the username:",
            store.username,
            "\nThe email:",
            store.email,
            "\nAnd your password was supposed to be secret but we don't care:", 
            store.password
        );
    };

    return (
        <form onSubmit={onLogin}>
            {/* omitted for brevity */}
        </form>
    );
}

Try it out

Keep adding different values to the inputs and hitting submit!
You should see updated values everytime.

Farewell!

Thanks for reading this far! :D

Hope you enjoyed this post, a reaction or feedback would be much appreciated.

https://github.com/raghav-misra/senko-demo

Better Web Components Pt. 1: Rendering Children ✔️

Raghav Misra — Sun, 19 Jan 2020 17:25:11 +0000

Hey! This is my first DEV article ever, and I would love feedback on how to improve! This is going to be a series, where in each article, I go over one cool trick to help you out (hopefully).

Web Components are really cool in my opinion! Think of the possibility! A powerful UI component framework, without using a framework!

Sometimes however, they can get inefficient to write. This, for the most part, is due to web components being very unopinionated. There is no state-management, no data-binding, etc. These features are often found in libraries and frameworks such as React or lit-element, because the libraries are abstractions over native JS APIs. On the other hand, Web Components are just APIs that are a part of the spec.

Problem Statement:

Custom Elements are nothing without what they contain (child nodes). Yet in Vanilla JavaScript, creating child nodes are a pain.

Let's say you want to render the following markup to a custom element (where {name} and {date} represent placeholders that need to be changed):

<h1>Hello, {name}</h1>
<p>Today is {date}</p>

How would we render this to a vanilla custom element?

Built-in Solutions:

Solution 1: Vanilla DOM API Calls ❌

We can use the native DOM APIs to accomplish this.

class DateName extends HTMLElement {
    connectedCallback() {
        const h1 = document.createElement("h1");
        const p = document.createElement("p");

        h1.innerText = `Hello, ${this.dataset.name}`;
        p.innerText = `Today is ${this.dataset.date}`;

        this.appendChild(h1);
        this.appendChild(p);
    }
}

customElements.define("date-name", DateName);

This works, but for more complex components, the amount of code needed is very high compared to the HTML code we end up with. Secondly, our code is hard to visualize, and is therefore annoying to debug.

Solution 2: `innerHTML` ❌

The innerHTML property allows us to directly modify the HTML code inside the custom element, exactly how we would in an HTML document.

class DateName extends HTMLElement {
    connectedCallback() {
        this.innerHTML = (`
            <h1>Hello, ${this.dataset.name}</h1>
            <p>Today is ${this.dataset.date}</p>
        `);
    }
}

customElements.define("date-name", DateName);

This solves all of our problems! Right? NO! While the innerHTML approach is definitely easier to read and write, it makes the browser work much harder, which decreases performance by quite a bit. Additionally, this method is very prone to XSS Attacks (more on that here).

Solution 3: HTML Templates ✔️

HTML Template Element (part of the Web Components spec) is a DOM element, where you can write normal HTML code (markup, inline scripts and styles), but nothing will be applied to the DOM. Better explanation here.

In your HTML:

<template>
    <h1>Hello, <slot id="name"></slot></h1>
    <p>Today is <slot id="date"></slot></p>
</template>

Your Client-Side JS:

// Template:
const dateNameTemplate = document.querySelector("template");

// Custom Element
class DateName extends HTMLElement {
    connectedCallback() {
        // Copy the nodes in the template:
        const clone = dateNameTemplate.content.cloneNode(true); 

        // Replace Placeholders:
        const name = clone.querySelector("#name").parentNo = this.dataset.name;
        clone.querySelector("#date").innerText = this.dataset.date;

        // Append Node:
        this.appendChild(clone);
    }
}

customElements.define("date-name", DateName);

Honestly, using HTML Templates is definitly very concise, and I personally really like this method. However, with more advanced components, the conciseness can go away, especially when there is a lot of different placeholders to replace. Regardless, this solution is effective, efficient, and secure.

Best Built-in Solution:

Out of the built-in solutions, the use of HTML templates is the best. The reasoning behind this is that it provides the perfect balance between performance (at par with the native DOM API method) and conciseness (easy to read, especially with well-commented code). However, all of the above solutions are viable, except for maybe using innerHTML due to security issues.

For any of the above solutions, the following HTML should work:

<date-name data-name="raghavm" data-date="Jan. 19, 2020"></date-name>

Hope this helped! Stay tuned for the next one :)