DEV Community: Dhairya Nadapara

Streamline Your Workflow: Setting Up Git Hooks with Husky to Simplify Version Updates

Dhairya Nadapara — Sat, 13 Apr 2024 07:32:49 +0000

Introduction

In the realm of software development, version management stands as a crucial pillar, ensuring seamless collaboration, accurate tracking of changes, and smooth deployment processes. However, manually updating version numbers can be cumbersome and prone to human error, leading to inconsistencies across projects. Enter Git hooks and Husky—a powerful duo that can automate version updates on commit, offering developers a streamlined solution with the added convenience of interactive prompts. In this article, we'll delve into the depths of Git hooks, explore the capabilities of Husky, and guide you through the process of setting up automated version updates with a touch of interactivity.

Understanding Semantic Versioning: Maintaining Consistency and Compatibility

Semantic Versioning, or SemVer, is a standardized versioning scheme used in software development to convey meaningful information about changes in a project. It consists of three numeric components: MAJOR, MINOR, and PATCH, separated by periods. These components represent:

MAJOR: Incremented for incompatible API changes.
MINOR: Incremented for backward-compatible feature additions.
PATCH: Incremented for backward-compatible bug fixes.

Additionally, SemVer includes pre-release versions and build metadata. Pre-release versions include identifiers such as alpha, beta, or rc, denoting a work in progress. Build metadata provides information about the build process or environment.

Understanding Git Hooks: A Foundation for Automation

Git hooks serve as versatile scripts triggered by specific Git events, such as commit, push, or merge. They provide developers with the ability to automate tasks before or after these events, thereby enhancing workflow efficiency and ensuring adherence to project standards.

Embracing Husky: Simplifying Git Hook Management

Husky emerges as a beacon of simplicity in the realm of Git hook management. With its intuitive interface and seamless integration, Husky empowers developers to effortlessly configure and execute hooks, making tedious manual setups a relic of the past.

Setting Up Husky and Git Hooks: A Step-by-Step Guide:

1. Installation: Getting Started with Husky

Begin by installing Husky as a dev dependency within your project. A simple npm command sets the stage for harnessing its power.



npm i husky@latest --save-dev

Note: Node 18+ is required for compatibility.

2. Initialise: Setting up Husky

Simplify Husky setup with the init command, which creates a pre-commit script in .husky/ and updates the prepare script in package.json:



npx husky init

3. Configuration: Tailoring Hooks to Your Workflow

Customize Git hooks to match your project's needs. For instance, create a pre-commit script in the .husky directory to execute before git commit:



touch ./.husky/pre-commit

Add an echo statement to verify the pre-commit hook execution:



echo "hello from pre commit" > ./husky/pre-commit

Stage and commit all files to confirm the pre-commit hook setup:



$ git add .
$ git commit -m "init"
Hello precommit
[main (root-commit) 2bb0f31] init
 13 files changed, 184 insertions(+)
 create mode 100755 .DS_Store
 create mode 100755 .husky/pre-commit
 create mode 100755 index.html
 create mode 120000 node_modules/.bin/husky
 create mode 100755 node_modules/husky/LICENSE
 create mode 100755 node_modules/husky/README.md
 create mode 100755 node_modules/husky/bin.mjs
 create mode 100755 node_modules/husky/husky
 create mode 100755 node_modules/husky/index.d.mts
 create mode 100755 node_modules/husky/index.mjs
 create mode 100755 node_modules/husky/package.json
 create mode 100755 package-lock.json
 create mode 100755 package.json

4. Automating Version Updates: Elevating Efficiency

Integrate automation with tools like bumpp to effortlessly manage version updates. Witness the magic of version management unfold before your eyes:



$ npm i bumpp --save-dev

Configure bumpp settings in bump.config.ts for enhanced version control:



// bump.config.ts
import { defineConfig } from 'bumpp';

export default defineConfig({
  /**
   * Indicates whether to create a git commit. Can be set to a custom commit message string
   * or `true` to use "release v".  Any `%s` placeholders in the message string will be replaced
   * with the new version number.  If the message string does _not_ contain any `%s` placeholders,
   * then the new version number will be appended to the message.
   *
   * Defaults to `true`.
  */
  commit: false,

  /**
   * Indicates whether to tag the git commit. Can be set to a custom tag string
   * or `true` to use "v".  Any `%s` placeholders in the tag string will be replaced
   * with the new version number.  If the tag string does _not_ contain any `%s` placeholders,
   * then the new version number will be appended to the tag.
   *
   * Defaults to `true`.
  */
  tag: false,

  /**
   * Indicates whether to push the git commit and tag.
   *
   * Defaults to `true`.
  */
  push: false,

   /**
   * Bump the files recursively for monorepo. Only works without `files` option.
   *
   * @default false
  */
  recursive: false,

  /**
   * Indicates whether to bypass git commit hooks (`git commit --no-verify`).
   *
   * Defaults to `false`.
  */
  noVerify: true,

  /**
   * Indicates whether the git commit should include ALL files (`git commit --all`)
   * rather than just the files that were modified by `versionBump()`.
   *
   * Defaults to `false`.
  */
  all: false,
});

5. Prompting for Version Updates: Balancing Automation with Interactivity

Elevate version management with interactive prompts using bumpp. Strike the perfect balance between automation and human intervention, ensuring accuracy and control throughout the versioning process.

Update package.json to include the version update script:



"scripts": {
    "prepare": "husky",
    "bump-version": "npx bumpp --preid canary"
}

Update pre-commit hook to execute the script



exec < /dev/tty

npm run bump-version

git add package.json package-lock.json

Commit the changes and observe the hooks in action:



$ git add .
$ git commit -m "bump setup"

Here's how it works.

Conclusion: Empowering Developers with Streamlined Version Management

By harnessing the combined might of Git hooks and Husky, developers can transcend the shackles of manual version management. Automation becomes the norm, enabling teams to maintain consistency, accuracy, and efficiency across projects. With the added touch of interactive prompts and adherence to Semantic Versioning, developers retain control and oversight, ensuring that each version update aligns seamlessly with project goals and standards.

Additional Resources:

Dive deeper into the world of Husky with the official documentation.
Explore the capabilities of Standard Version through its comprehensive documentation.
Unravel the mysteries of semantic-release with its detailed documentation.
Discover the versatility of bumpp with its comprehensive documentation.

With Git hooks and Husky as your allies, version management evolves from a daunting task into a seamless and efficient process. Embrace automation, embrace interactivity, adhere to Semantic Versioning, and unlock the full potential of your development workflow.

Futuristic Infinite Scrolling in React and JavaScript

Dhairya Nadapara — Thu, 23 Sep 2021 16:51:01 +0000

There are multiple use cases in the modern UX when we are required to use infinite scrolling. Previously, devs are using the height of the viewport and element to find out the intersection of the element is in the viewport. The main issue in the same is that the function that calculations will be executed on the main queue so it makes your app a bit slow and it was bit unreliable. A few days ago I came across the Intersection Observer API. Which can be used in the following applications:

Lazy-loading of images or other content as a page is scrolled.
Implementing "infinite scrolling" websites, where more and more content is loaded and rendered as you scroll so that the user doesn't have to flip through pages.
Reporting of visibility of advertisements to calculate ad revenues.
Deciding whether or not to perform tasks or animation processes based on whether or not the user will see the result.

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

Source code is available at https://github.com/dhairyanadapara/infinite-scoller-example

Demo link: https://dhairyanadapara.github.io/infinite-scoller-example/

Let's start with the solution.

import React, { Component } from "react";
import "./App.css";

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            arr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
        };
    }
    componentDidMount() {
        this.createObserver();
    }

    createObserver = () => {
        let options = {
            root: null,
            rootMargin: " 40px",
            threshold: [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0],
        };
        const boxElement = document.getElementById("loading");
        const observer = new IntersectionObserver(
            this.handleIntersect,
            options
        );
        observer.observe(boxElement);
    };

    handleIntersect = (entries, observer) => {
        const { arr } = this.state;
        entries.forEach((entry) => {
            console.log(entry.intersectionRatio);
            if (entry.intersectionRatio > 0) {
                this.setState({
                    arr: arr.concat([
                        10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21,
                    ]),
                });
            }
        });
    };

    render() {
        const { arr } = this.state;
        return (
            <div className="App" id="app">
                <div id="infinite-container">
                    <div class="cards-list" id="card-list">
                        {arr.map((x) => (
                            <div class="card 1">
                                <div class="card_image">
                                    {" "}
                                    <img src="https://i.redd.it/b3esnz5ra34y.jpg" />
                                </div>
                                <div class="card_title title-white">
                                    <p>Card Title</p>
                                </div>
                            </div>
                        ))}
                    </div>
                    <div id="loading" style={{ height: "100px" }}>
                        Loading
                    </div>
                </div>
            </div>
        );
    }
}

export default App;

As you can see we have used the react class component so it will be easy to understand. You can use functional components also.

Let's start with understanding the observer initialization.

createObserver = () => {
    let options = {
        root: null,
        rootMargin: " 40px",
        threshold: [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0],
    };
    const boxElement = document.getElementById("loading");
    const observer = new IntersectionObserver(this.handleIntersect, options);
    observer.observe(boxElement);
};

IntersectionObserver takes 2 arguments.

options
options are the configuration for Intersection Observer. It has 3 properties:
1. root: The element which you want to use as the viewport. If you want to use the browser's viewport pass null.
2. rootMargin : Offset is added to the target rectangle while calculating intersections
3. threshold: A list of thresholds, sorted in increasing numeric order. The callback will be called when intersectionRatio passes the threshold
callback
callback has 2 argument:
1. entries list of IntersectionObserverEntry, which describes the intersection between target and root element
2. observer IntersectionObserver object same we have created in createObserver

Here we are observing the loading element which will be at bottom of the card list. In our case, we have only 1 target element in the observer so we will get only 1 object in entries. If you have multiple target elements targets to the same observers you will get more entries.

handleIntersect = (entries, observer) => {
    const { arr } = this.state;
    entries.forEach((entry) => {
        if (entry.intersectionRatio > 0) {
            this.setState({
                arr: arr.concat([
                    10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21,
                ]),
            });
        }
    });
};

IntersectionObserverEntry object have multiple attributes like boundingClientRect,intersectionRatio,intersectionRect,isIntersecting,rootBounds,target,
time.

The main attributes are:

intersectionRatio: returns the percentage of intersectionRect to the boundingClientRect
isIntersecting: return if target and root are intersecting or not.
target: this is an important attribute when we have multiple targets attached to the same observer

In the above function we have iterated over the entries and checked if the intersection ratio is more than 0 is not means the target element has an intersection with root or viewport is happened or not. As you can see we are observing the element with id loading which is placed at bottom of the card-list element. So what will happen when we scroll down and reach the loading element it intersection will happen and the state will be updated accordingly.

In this case, we are not doing any API calls so data is getting updated quickly. In case of fetch request, it would be better to use the rootMargin. You can also update the threshold based on requirements.

React with web assembly setup without CRA

Dhairya Nadapara — Wed, 01 Sep 2021 13:10:01 +0000

Hey everyone, I was curious about the wasm from the last few years because of rust-lang. I have started to learn rust for a long time and I was looking for using it somewhere for learning purposes. As I have most of the work in javascript and react, I was looking if I can do something in the same domain.
I searched about the use-cases and found out that it can be used as a web binary. I have tried some blogs but usually found it with vanilla js or react using rewire to update the webpack. I want to do something basic with a custom setup.
I have tried to create the steps to create the custom setup for React + Wasm using webpack. Hope it will help you. Happy Coding.

Source code: https://github.com/dhairyanadapara/react-wasm-boilerplate

Directory setup

Let's first start with basic thing which are required. We will create the directory and setup version control and JS package manager.

Create new dir

mkdir react-wasn-tutorial && cd react-wasn-tutorial

Init npm

I have used npm as package manager

npm init

Init git

I have used git for version control.

git init

React and Webpack Setup

Now our directory is setup is completed with package manager and version control. Let's start with React setup first and then we will move to Webpack. We will add basic dependencies for react and webpack

Install react dependencies

npm install react react-dom --save

Setup HTML boilerplate

Create public directory in root and create index.html inside. It should have one div with "root" id as default id for react root. If you want you can have other name but you will have to use same name in react root.

<!DOCTYPE html>
<html>
  <head>
    <title>My React Configuration Setup</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Create root component

If you have used CRA you might have know that all the files and components are written inside src directory. We will do the same. Create src directory and create out root file index.jsx

mkdir src && cd src && touch index.js

Create react component

Create react component in root file

import React from 'react';
import ReactDOM from 'react-dom';

class Welcome extends React.Component {
  render() {
    return <h1>Hello World from React boilerplate</h1>;
  }
}
ReactDOM.render(<Welcome />, document.getElementById('root'));

Configure webpack 5

Now we will setup the webpack to create build and run the application. First we will install dependencies for webpack and babel.

npm install --save-dev webpack webpack-dev-server webpack-cli
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader @babel/runtime @babel/plugin-transform-runtime

Create webpack.config.js

Create webpack.config.json. We will add few configuration in file.

entry - It's the entry point to JS files for building the build.
output - It the output directory for build and build name
devServer - settings for running dev server
modules - rules for transcompiling the JS to ES2015 for browser compatibility

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    publicPath: '/',
    filename: 'bundle.js',
  },
  devServer: {
    static: './build',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
    ],
  },
};

Create `.babelrc`

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.

Create configuration for babel in root directory

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [["@babel/transform-runtime"]]
}

Update `package.json` script to run the project

Add script for running the webpack with npm script

"scripts": {
    "start": "webpack serve --mode development --hot",
}

Add eslint and prettier dependencies

Install and Configure Prettier

npm install --save-dev --save-exact prettier

Create `.prettierrc`

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5"
}

Add script in `package.json`

"scripts": {
 "format": "prettier --write \"src/**/*.js\""
},

Add source map for debugging

// webpack.config.js
module.exports = {
  devtool: 'inline-source-map',
  // … the rest of the config
};

Setting ESLint

npm --save-dev install eslint eslint-loader babel-eslint eslint-config-react eslint-plugin-react

Update webpack

module.exports = {
  // modify the module
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader', 'eslint-loader'], // include eslint-loader
      },
    ],
  },
};

Create `.eslintrc`

{
  "parser": "babel-eslint",
  "extends": "react",
  "env": {
    "browser": true,
    "node": true
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "rules": {
    "space-before-function-paren": ["off", "always"]
  }
}

Update `package.json` scripts

"scripts": {
  "eslint-fix": "eslint --fix \"src/**/*.js\"",
  "build": "webpack --mode production",
  "watch": "webpack --watch --mode development",
},

Add html-webpack-plugin

npm install html-webpack-plugin --save-dev

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: //…
  output: {
    //…
  },
  devServer: {
    static: "./build",
  },
  module: {
    //…
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve('./public/index.html'),
    }),
  ]
};

Configure css

npm install --save-dev css-loader style-loader

Update webpack configuration

module.exports = {
    ...
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: [/node_modules/, /build/],
                use: ['babel-loader', 'eslint-loader']
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    },
    ...
};

create and import css to file

touch src/main.css

body {
    background: red;
}

import React from 'react';
import ReactDOM from 'react-dom';
import './main.css';

...

Run build

npm run build

For hot reloading run 2 command in different terminals

npm run start

npm watch

Create Rust library

cargo new --lib wasm-lib --vcs none --edition 2018
cd wasm-lib

You will find some tests in lib.rs

#[cfg(test)]
mod tests {
    #[test]
    fn it_works() {
        assert_eq!(2 + 2, 4);
    }
}

Let remove the test code and write some code.

First import the wasm-bindgen. It's required for communication between rust and JS

use wasm_bindgen::prelude::*;

Now we will try to execute the JS alert from rust library. extern statement tells Rust that we want to call some externally defined functions.

Add public function named greet, which is exposed to Javascript. Add alert with Hello world string.

#[wasm_bindgen]
extern {
    pub fn alert(s: &str);
}

#[wasm_bindgen]
pub fn greet(name: &str) {
    alert(&format!("Hello, {}!", name));
}

We have written the code but adding dependencies to Cargo.toml is still required. Update the Cargo.toml with required keys

[package]
name = "wasm-lib"
version = "0.1.0"
authors = ["Your Name <you@example.com>"]
description = "A sample project with wasm-pack"
license = "MIT/Apache-2.0"
repository = "https://github.com/yourgithubusername/wasm-lib"
edition = "2018"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

For more info you can refer this article
https://developer.mozilla.org/en-US/docs/WebAssembly/Rust_to_wasm

Build the package

wasm-pack build --target bundler --out-dir ../build

Add the command to package.json

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --watch --mode development",
    "start": "webpack serve --mode development --hot",
    "format": "prettier --write \"src/**/*.js\"",
    "eslint-fix": "eslint --fix \"src/**/*.js\"",
    "build": "webpack --mode production",
    "build:wasm": "cd wasm-lib && wasm-pack build --target bundler --out-dir ../node_modules"
  },

Import and use wasm package

import React from 'react';
import * as wasm from 'wasm_lib';

class Welcome extends React.Component {
  componentDidMount() {
    wasm.greet('Hello World');
  }

  render() {
    return (
      <div className="container">
        <h1 className="test">Hello World from React boilerplate</h1>
        <h2 className="test1">Dhairya Nadapara</h2>
      </div>
    );
  }
}

export default Welcome;

Enable experimental features in webpack

module.exports = {
    ...
    experiments: {
        executeModule: true,
        outputModule: true,
        syncWebAssembly: true,
        topLevelAwait: true,
        asyncWebAssembly: true,
        layers: true,
        lazyCompilation: true
    }
};

Restart the server. Popup will be shown on load

To run the app execute:

1. npm run build:wasm(In case you want to build lib again)
2. npm run watch
3. npm run start

Note:
This is not the perfect setup for the production app. There are many changes required. I will try to improve this overtime and will update you with new post :)

Reference: