Forem: nikita

Share state between React components using custom hooks and observables

nikita — Tue, 13 Apr 2021 11:34:35 +0000

React custom hooks are a powerful feature that provide a handy way to organize and reuse logic in a simple functional manner. And mixing them with observables allows us to solve one of the most common problems in a Single Page Apps - state management.

Firstly we need to create some basic observable implementation:

function makeObservable(target) {
  let listeners = []; // initial listeners can be passed an an argument aswell
  let value = target;

  function get() {
    return value;
  }

  function set(newValue) {
    if (value === newValue) return;
    value = newValue;
    listeners.forEach((l) => l(value));
  }

  function subscribe(listenerFunc) {
    listeners.push(listenerFunc);
    return () => unsubscribe(listenerFunc); // will be used inside React.useEffect
  }

  function unsubscribe(listenerFunc) {
    listeners = listeners.filter((l) => l !== listenerFunc);
  }

  return {
    get,
    set,
    subscribe,
  };
}

And then create a store and hook it to React by using subscribe in useEffect:

const userStore = makeObservable({ name: "user", count: 0 });

const useUser = () => {
  const [user, setUser] = React.useState(userStore.get());

  React.useEffect(() => {
    return userStore.subscribe(setUser);
  }, []);

  const actions = React.useMemo(() => {
    return {
      setName: (name) => userStore.set({ ...user, name }),
      incrementCount: () => userStore.set({ ...user, count: user.count + 1 }),
      decrementCount: () => userStore.set({ ...user, count: user.count - 1 }),
    }
  }, [user])

  return {
    state: user,
    actions
  }
}

And that is it! You can now use useUser hook in any of your components, trigger related actions and be sure that state is always up to date. No need for React.Context, lifting state up or using external state management tool.

Let me know what you think and thanks for reading.

Introducing Rececss: simple but highly customizable alternative to Tailwind

nikita — Sun, 11 Apr 2021 14:37:58 +0000

As many front-end developers I've realized the benefits of css utility classes approach for styling. Tailwind is indeed a great tool but I've been constantly finding myself in a situations when I got pretty much exhausted by configuring it to use values, classnames or states I wanted to.

So I decided to have fun and develop yet another css utils generator with this motivation in mind:

Autogenerated unit values with range syntax support.
Ability to split output files by media queries.
More control over state utilities (:hover, :active, js states).
Rich classnames customization that default to Emmet abbreviations.

And here's what I came up with:

n1stre / rececss

Minimalistic, fully customizable CSS utilities generator

Configuration

// rececss.config.js

module.exports = {
  output: {
    path: ".",
    splitByMedia: true,
  },
  media: {
    md: "only screen and (min-width: 768px)",
    lg: "only screen and (min-width: 1024px)"
  },
  rules: {
    width: { $px: [50, 100], $pct: [100] },
    height: { $px: [50, 100] },
    padding: {
      edges: { $px: [[0, 50, 5]] }
    },
    margin: {
      edges: { $px: [-80, [0, 50, 5]] }
    },
    font: {
      size: { $px: [[8, 24, 2]] },
      family: { pri: "'Archivo Black', sans-serif", sec: "'Montserrat', sans-serif" },
    },
    border: {
      shorthand: { sep: "1px solid rgba(0,0,0,0.1)", frame: "10px solid #fff", },
      radius: { $px: [15], $pct: [50] },
    },
    background: {
      color: { light: "#fff", blue: "#ECF0FB", }
    },
    shadow: {
      box: { air: "0px 4px 12px rgba(0, 0, 0, 0.08)", }
    },
    color: { blue: "#51568A" },
  },
}

Usage

Running npx rececss from within a folder that contains this config will generate three separate css files which later could be used in your markup:

<link href="./rececss.css" rel="stylesheet">
<link href="./rececss.md.css" rel="stylesheet" media="only screen and (min-width: 768px)">
<link href="./rececss.lg.css" rel="stylesheet" media="only screen and (min-width: 1024px)">

If media is provided browsers will apply the lowest download priority to the stylesheets that didn't matched its media query.

Check out the generated classnames in action:

<body class="bgc_blue p_30">
  <div class="bgc_light bdrs_15 bxsh_air p_30 mt_50">
    <div class="d_f fxd_c ai_c md:fxd_r">
      <img
        src="./avatar.jpg"
        class="w_100 h_100 bd_frame bdrs_50% mt_-80 md:bdrs_15 md:mt_0 md:bd_n"
      />

      <div class="ta_c md:ta_l md:pl_15 md:d_f jc_sb fx_a ai_c">
        <div class="ph_10">
          <p class="ff_pri c_blue mv_10 fz_24 md:mt_0">Some Person</p>
          <p class="ff_sec m_0 mb_30 md:mb_0">JS Developer</p>
        </div>

        <div class="d_f jc_c">
          <div class="ph_15 bdr_sep">
            <p class="ff_pri c_blue fz_20">$6460</p>
            <p class="ff_sec">Income</p>
          </div>
          <div class="ph_15 bdr_sep">
            <p class="ff_pri c_blue fz_20">$1240</p>
            <p class="ff_sec">Expenses</p>
          </div>
          <div class="ph_15">
            <p class="ff_pri c_blue fz_20">$870</p>
            <p class="ff_sec">Loan</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

And the result:

Check out the documentation if you're interested on how to modify classnames, use :hover, :focus, or even javascript driven states.

The project is in the early stage of development so I would be really happy to receive any feedback. If you want to help feel free to open an issue, submit a PR or just give this thing a star if you like it.

n1stre / rececss

Minimalistic, fully customizable CSS utilities generator

Thanks for reading.

Increasing React components development productivity

nikita — Mon, 01 Feb 2021 12:00:55 +0000

Every react project is unique and may follow some conventions on how every component should be structured. It always depends on the size of the project, team preferences, etc. Here is an example of a typical react component in my projects:

|__Button
| |__Button.module.scss
| |__Button.stories.mdx
| |__Button.spec.ts
| |__Button.tsx
| |__index.ts
| |__README.md

While I personally find this structure convenient and self-contained, it is a bit painful to create all of the files from scratch for every new component. So I usually end up with copy and pasting the whole folder, renaming filenames and contents, fixing imports, etc.

It's definitely a bit faster but still takes some time. That's why I decided to create and use a tool that would make this process easier and faster. If you're interested in its development process here's an overview article.

n1stre / bystro

A CLI utility library for scaffolding code templates and boilerplates.

To see it in action let's create a custom react-component template. Do this from the project root:

mkdir .bystro
mkdir .bystro/react-component
cd .bystro/react-component

Then describe its structure by simply creating desired files:

|__<<Name>>
| |__<<Name>>.module.scss
| |__<<Name>>.stories.mdx
| |__<<Name>>.spec.ts
| |__<<Name>>.tsx
| |__index.ts
| |__README.md

<<Name>> is a variable that would be replaced with real component name you'll enter later. It could be used in file contents as well:

import React from "react";
import styles from "./<<Name>>.module.scss";

type <<Name>>Props = {
  className?: string;
  onClick?: (e: React.MouseEvent) => void;
  children: React.ReactNode;
};

const <<Name>> = (props: <<Name>>Props) => {
  return null;
};

<<Name>>.defaultProps = {};

export default <<Name>>;

There could be as many variables you like but to make them processable you need to create a .templaterc file inside of template folder. In our case it is touch .bystro/react-component/.templaterc:

{
  "variablePrefix": "<<",
  "variableSuffix": ">>",
  "variables": [
    { "name": "Name", "description": "React component name"}
  ]
}

And that should be it, our template is ready.
Let's create a new component from it. From inside the project root run:

npx bystro react-component ./src/components

After that you'll be prompted to fill all of the variables:

? Enter Name (React component name):

For example, enter Title and there you have it! Navigate to
./src/components to see your newly created component:

|__Title
| |__Title.module.scss
| |__Title.stories.mdx
| |__Title.spec.ts
| |__Title.tsx
| |__index.ts
| |__README.md

Thanks for reading.
Would <3 to receive some feedback.

Developing template scaffolding CLI util with Typescript and Clean Architecture

nikita — Mon, 01 Feb 2021 01:09:03 +0000

Intro

Everyone involved in writing code sometimes deals with copy and pasting at some point. It may be a single file, a small folder of related files with specific structure, or even a project boilerplate.

As a React developer I used to do this ALOT. When it comes to creating a new component I usually copy the folder of the component I've already created.

Lets assume I want to create a Title component. I start by copying the nearest Button component:

|____Button
| |____Button.module.scss
| |____Button.stories.mdx
| |____Button.tsx
| |____index.ts
| |____README.md

Then I need to:

rename folder and filenames
find and replace all occurrences of Button in source code
get rid of redundant props, imports, etc
🤦

So after a small research I decided to create a simple CLI tool that would save me some time by providing a short npx command. Something like

npx mycooltool rfc ./components

where rfc is the name of the template (React functional component) and ./components is the path to put it in.

Rest of the article will guide you through the development process of the above CLI utility but looking ahead, if you want to jump straight to code, this is what I came up with:

n1stre / bystro

A CLI utility library for scaffolding code templates and boilerplates.

bystro

A CLI utility library for scaffolding code templates and boilerplates

Sometimes you can find yourself copypasting a whole folder of files which represents some component (f.e. React component) and then renaming filenames, variables, etc. to satisfy your needs. Bystro helps you to automate this process.

Install

$ npm install -D bystro

Usage

$ bystro <template_name> <path>

Note: You can alternatively run npx bystro <template_name> <path> without install step.

Arguments

<template_name> - Name of the template you want to scaffold.
<path>- Path to scaffold template in.

List of available templates can be found here

Creating a template

To create a local template start by making a .bystro directory in the current working directory:

$ mkdir .bystro

After that you can add templates:

$ mkdir .bystro/my_template
$ mkdir .bystro/my_template/__Name__
$ echo 'import "./__Name__.css";' > .bystro/my_template/__Name__.js
$ echo '// hello from __Name__'

…

View on GitHub

Planning

Before writing any code I found it reasonable to put together some small description of the algorithm that I expect from my CLI tool to implement:

Obtain user input (<template_name> and <path_to_clone_into>) from the command line.
Get template data by <template_name> by checking custom templates folder created by user and if not found fetch it from predefined templates folder inside of the package itself.
If template was found prompt user to fill the variables required in the template.
Interpolate template filenames and contents according to users input.
Write result template files into <path_to_clone_into>

Architecture

For now it is totally fine to store shared templates inside of package source code but the bigger it gets the slower npx will execute it.

Later we could implement templates search using github api or something. That is why we need our code to be loosely coupled to easily switch between template repository implementations.

Clean architecture to the rescue. I won't go in much details explaining it here, there are a lot of great official resources to read. Just take a look at the diagram which describes the main idea:

CA states that source code dependencies can only point inwards, the inner circles must be unaware of the outer ones and that they should communicate by passing simple Data Transfer objects. Let's take all the about literally and start writing some code.

Business rules

If we take a closer look at the algorithm we've defined at planning phase it seems like it's a perfect example of a use case. So let's implement right away:

import Template from "entities/Template"

export default class ScaffoldTemplateIntoPath {
  constructor(
    private templatesRepository: ITemplatesRepository,
    private fs: IFileSystemAdapter,
    private io: IInputOutputAdapter,
  ) {}

  public exec = async (path: string, name: string) => {
    if (!name) throw new Error("Template name is required");

    // 2. Get template data by <template_name>
    const dto = this.templatesRepository.getTemplateByName(name);
    if (!dto) throw new Error(`Template "${name}" was not found`);

    // 3. If template was found prompt user to fill the variable
    const template = Template.make(dto).setPath(path);
    const variables = await this.io.promptInput(template.getRequiredVariables());

    // 4. Interpolate template filenames and contents
    const files = template.interpolateFiles(values);

    // 5. Write modified files
    return this.fs.createFiles(files);
  };
}

As you can see Template is the only direct dependency while ITemplatesRepository, IFileSystemAdapter and IInputOutputAdapter are injected (inverted) which means they don't break the dependency rule. This fact gives us a lot of flexibility since their possible changes won't affect ScaffoldTemplateIntoPath usecase and we can easily mock them out in test environment.

Let's now implement the Template entity:

class Template implements ITemplateInstance {
  constructor(private dto: ITemplate) {
    this.dto = { ...dto };
  }

  public getPath = () => {
    return this.dto.path;
  };

  public getRequiredVariables = () => {
    return this.dto.config.variables;
  };

  public getFiles = () => {
    return this.dto.files;
  };

  public interpolateFiles = (variables: Record<string, string>) => {
    return this.dto.files.map((file) => {
      // private methods
      file = this.interpolateFile(file, variables); 
      file.path = this.toFullPath(file.path);
      return file;
    });
  };

  public setPath = (newPath: string) => {
    this.dto.path = newPath;
    return this;
  };

  public toDTO = () => {
    return this.dto;
  };

  // ...
}

With this in place we already have our basic business rules ready to be used within basically any javascript environment. It may be a CLI tool, REST API, frontend app, browser extension etc.

Feel free to check out the source code for the outer layers implementations:

n1stre / bystro

A CLI utility library for scaffolding code templates and boilerplates.

Publish to `npm`

To make the project globally available as an executable npm package we need to do the following in package.json:

{
  "name": "bystro",
  "version": "0.1.0",
  "bin": "./dist/index.js", // compiled code
  // ...
}

By setting bin field npm should treat our project as an executable by putting a symlink named bystro into ./node_modules/.bin on install.

Lastly after compiling our .ts code we will use np package to help us to efficiently publish our package.

"scripts": {
  "build": "tsc -p .",
  "release": "yarn build && np", 
  // ...
}

Running npm run release or yarn release should check our files, run tests, bump version, and finally publish our project to npm registry.

🎉🎉🎉

Outro

I'm pretty excited to bring Clean Architecture into my project, but I want you not to take everything I say for granted. I'm learning as well so I might be wrong in understanding some CA concepts and would love to hear some feedback.

BTW this is my first article ever as well as the first open source project and I would be happy to hear from the community. Any feedback, pull requests, open issues would be great. Let me know what you think.

Thanks for reading 🙏

Forem: nikita

Share state between React components using custom hooks and observables

Introducing Rececss: simple but highly customizable alternative to Tailwind

n1stre / rececss

Minimalistic, fully customizable CSS utilities generator

Configuration

Usage

n1stre / rececss

Minimalistic, fully customizable CSS utilities generator

Increasing React components development productivity

n1stre / bystro

A CLI utility library for scaffolding code templates and boilerplates.

Developing template scaffolding CLI util with Typescript and Clean Architecture

Intro

n1stre / bystro

A CLI utility library for scaffolding code templates and boilerplates.

bystro

Install

Usage

Arguments

Creating a template

Planning

Architecture

Business rules

n1stre / bystro

A CLI utility library for scaffolding code templates and boilerplates.

Publish to npm

Outro

Publish to `npm`