DEV Community: Zhitomir Oreshenski

The easiest way to patch your npm package when there is a 🐛

Zhitomir Oreshenski — Sat, 05 Dec 2020 17:36:12 +0000

What do you do when you are working on npm-based project and encounter an issue with one of your dependecies?

The easiest way and actually most devs do, is go to Github's package repository and log a bug. The real problem with that can be the lack of time that a maintainer has to fix it. But unfortunately, the deadline is comming up and you have to find another way at least for couple of weeks.
Fork the broken package, fix it and open a PR. Well that seems to be a good solution at first, but it also means that you need to keep it locally until the maintainer approve the changes and merge them with the main branch.

Hmm what now..?

The best approach in such cases would be to perform your changes into a dependency and apply the fix via npm using 'patch-package'. But wait.. how this actually work? Well, very simple:

1) Fix a bug in one of your dependencies
nano node_modules/react-redux/dist/react-redux.js

     console.log('Hi I am a redux patch');

2) Install patch-package:

     npm install patch-package -D

or via Yarn:

     yarn add patch-package postinstall-postinstall --dev

and also add postinstall script:

 "scripts": {
  "postinstall": "patch-package"
 }

3) Run patch-package to create a .patch file

    npx patch-package react-redux or yarn patch-package react-redux

This will produce following changes:

diff --git a/node_modules/react-redux/dist/react-redux.js b/node_modules/react-redux/dist/react-redux.js
index c56d7f2..3a2b1e2 100644
--- a/node_modules/react-redux/dist/react-redux.js
+++ b/node_modules/react-redux/dist/react-redux.js
@@ -27,6 +27,8 @@
    // nor polyfill, then a plain number is used for performance.
    var hasSymbol = typeof Symbol === 'function' && Symbol.for;

+   console.log('Hi I am a redux patch');
+
    var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for('react.element') : 0xeac7;
    var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for('react.portal') : 0xeaca;
    var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for('react.fragment') : 0xeacb;

4) Apply your fix via npm package manager:

   npm install or yarn install

5) Add your staged changes:

   git add .
   git commit -m 'bugfix/react-redux: Fix a react-redux bug'
   git push origin bugfux/react-redux

Thank you, hope you enjoy this post!
Happy coding!😊

Integrate an open source (🆓) Rich Text Editor Component (Wyswig) in your React app 👨‍💻

Zhitomir Oreshenski — Sat, 21 Nov 2020 20:09:04 +0000

Create a simple react app
Create a simple architecture
Install all necessary dependencies
Create and configure the Editor component
Use it

Create a simple react app

npx create-react-app wyswig-editor --typescript
cd wyswig-editor
yarn start

Create a simple architecture

-> In the terminal execute following:

cd src && mkdir components editor

Install all necessary dependencies


-> Using Yarn:

 yarn add react-draft-wysiwyg draft-js draftjs-to-html @types/react-draft-wysiwyg @types/draftjs @types/draft-to-html

-> Using Npm:

npm install react-draft-wysiwyg draft-js draftjs-to-html @types/react-draft-wysiwyg @types/draftjs @types/draft-to-html

-> Without Typescript only:

yarn add react-draft-wysiwyg draft-js draftjs-to-html

Create and configure the Editor component


-> src/components/WysiwygEditor.tsx

import React, { Fragment, useCallback } from 'react';
import { Editor as ReactWysiwygEditor } from 'react-draft-wysiwyg';
import { useEditor, useEditorConfig } from '../../editor';

export const WysiwygEditor = () => {
  const { editorOptions } = useEditorConfig();
  const {
    editorState,
    setEditorState,
    enteredText,
    setEnteredText,
    convertedHtml,
    getEditorText,
  } = useEditor();

  const handleEditorStateChange = useCallback(
    (editorState) => {
      const text = getEditorText(editorState.getCurrentContent());
      setEditorState(editorState);
      setEnteredText(text);
    },
    [getEditorText, setEditorState, setEnteredText]
  );

  return (
    <Fragment>
      <ReactWysiwygEditor
        editorState={editorState}
        onEditorStateChange={handleEditorStateChange}
        placeholder="Type here..."
        toolbar={editorOptions}
      />
      <textarea
        className="textarea"
        disabled
        value={editorState && convertedHtml}
      />
      <div>Editor text: {enteredText}</div>
    </Fragment>
  );
};

-> src/utils/helpers/constants.ts

export const DEFAULT_IMAGE_SIZE = {
  height: '500',
  width: '500',
};

export const EDITOR_OPTIONS = [
  'inline',
  'blockType',
  'list',
  'textAlign',
  'history',
  'image',
];

-> src/utils/helpers/index.ts

export * from './constants';

-> src/editor/hooks/index.ts

export * from './useEditor';
export * from './useEditorConfig';

-> src/editor/hooks/useEditor.ts

import { ContentState, convertToRaw, EditorState } from 'draft-js';
import draftToHtml from 'draftjs-to-html';
import { useCallback, useState } from 'react';

export const useEditor = () => {
  const [editorState, setEditorState] = useState<EditorState>(
    EditorState.createEmpty() || null
  );
  const [enteredText, setEnteredText] = useState<string>('');
  const [uploadImages, setUploadImages] = useState<any>([]);

  const getEditorText = useCallback(
    (raw: ContentState) => raw.getPlainText(),
    []
  );

  const rawData = convertToRaw(editorState.getCurrentContent());
  const convertedHtml = draftToHtml(rawData);

  return {
    enteredText,
    setEnteredText,
    editorState,
    setEditorState,
    convertedHtml,
    rawData,
    getEditorText,
  };
};


-> src/editor/hooks/useEditorConfig.ts

import { useCallback } from 'react';
import { DEFAULT_IMAGE_SIZE, EDITOR_OPTIONS } from '../../utils';

export const useEditorConfig = () => {
  const makeEditorOptions = useCallback(() => {
    return {
      options: EDITOR_OPTIONS,
      image: {
        alt: { present: true, mandatory: true },
        defaultSize: DEFAULT_IMAGE_SIZE,
      },
      blockType: { inDropdown: true },
      inline: { inDropdown: false },
      list: { inDropdown: false },
      textAlign: { inDropdown: false },
      link: { inDropdown: false },
      history: { inDropdown: false },
    };
  }, []);

  const editorOptions = makeEditorOptions();

  return { editorOptions };
};

Use it


-> App.tsx

import React from 'react';
import { WysiwygEditor } from './components';

import './App.css';

const App = () => {
  return (
    <>
      <WysiwygEditor />
    </>
  );
}

export default App;

-> App.css

.App {
  margin-left: 20px;
}

.textarea {
  width: 35vw;
  height: 20vh;
}

Now you can see the result:

Useful links:
React official docs
React Wysiwyg Editor

Thank you for reading this article! I hope you find it useful🚀

The top 10 nice-to-have VSCode extensions for a React development 🔥

Zhitomir Oreshenski — Sun, 15 Nov 2020 21:11:25 +0000

ESLint - A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease

Prettier - An opinionated code formatter. Supports many languages, configurable and integrates with most editors

DotENV - A zero-dependency module that loads environment variables from a .env file into process .env

Bracket Pair Colorizer - A customizable extension for colorizing matching brackets

Import Cost - Display import/require package size in the editor

Auto Import - Automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX

File-icons - File-specific icons in VSCode for improved visual grepping

GitLens - Supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more

Path Intellisense - VSCode plugin that autocompletes filenames

ES7 snippets - React/Redux/GraphQL/React-Native

How to Setup your React app with Redux Toolkit and Typescript

Zhitomir Oreshenski — Sat, 26 Sep 2020 15:31:20 +0000

React – a JavaScript library for building user interfaces --> reactjs

Typescript – is an open-source language that extends JavaScript by adding types. --> typescript

Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server and native). --> redux

Redux Toolkit – as per official Redux documentation, it is recommended approach for writing Redux logic. It wraps around the Redux core, and contains all needed packages and functions for start building a Redux app. --> redux-toolkit

Why do we want to write single page apps? - The main reason is that they allow us to offer a more-native-app-like experience to the user.

Developing modern web applications involves not only UI building, but also require state management. One of the most comprehensive library for this is Redux. In this tutorial you will learn how to setup Redux using the latest libraries and simplified techniques available in 2020.

Why to choose Redux Toolkit
How to Setup Create-React-App with Typescript and Redux
How to Structure your Redux
Connecting Redux with React using useDispatch and useSelector hooks
Summary

Why to choose Redux Toolkit

Simple – Includes utilities to simplify common use cases like store setup, creating reducers, immutable update logic, and more.
Opinionated – Provides good defaults for store setup out of the box, and includes the most commonly used Redux addons build-in.
Powerful – Takes inspiration from libraries like Immer and Autodux to let you write ‘mutative’ immutable update logic, and even create entire ‘slices’ of state automatically.
Effective – Lets you focus on the core logic your app needs, so you can do more work with less code.

How to Setup Create-React-App with Typescript and Redux

For this Redux toolkit tutorial lets start with setup a new react application using CRA:

npx create-react-app redux-toolkit –template typescript

yarn create-react-app redux-toolkit –template typescript

npx on the first line is no a typo – it’s a package runner tool that comes with npm 5.2+

Note:

If you’ve previously installed creat-react-app via npm globally, please uninstall the package using "npm uninstall name_of_the_package" to ensure that npx always uses the latest version. Global installs of create-react-app are no longer supported.

cd redux-toolkit

npm start or yarn start (in case you are using ‘yarn’)

Please double check if following packages are installed. In case they are not present, to add typescript to a create-react-app project, first install it:

npm install –save typescript @types/node @types/react @types/react-dom @types/jest

yarn add typescript @types/node @types/react @types/react-dom @types/jest

Next we will add redux-toolkit, redux-logger and uuid with following:

npm install –save react-redux redux-logger @reduxjs/toolkit uuid

yarn add react-redux redux-logger @reduxjs/toolkit uuid

How to Structure your Redux

src
App
    App.tsx
    App.css
type.d.ts
index.tsx
index.css
store
    todos
        index.ts
        todos.initialState.ts
        todos.reducer.ts
        todos.slice.ts
root-reducer.ts
store.ts

Now we are ready to start configuring our store:

Step 1: Create a folder "/src/store"

All files related to our Redux will be placed here.

Step 2: Create a file "store.ts" in "src/store"

This file will contain "configureStore" function that is abstraction over the standart Redux "createStore" function and it is responsible for the store setup. If we want to use "redux-logger" and apply custom middleware, we need to import "getDefaultMiddleware()" function and spread all available props together with "logger", then pass it as a prop to "configureStore".

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
import logger from 'redux-logger';

import { reducer } from './root-reducer';

const middleware = [...getDefaultMiddleware(), logger];

export default configureStore({
  reducer,
  middleware,
});

Step 3: Create a file "root-reducer.ts" in "src/store"

Because we structure the app in the long run to scale, we want to have a separate "root-reducer.ts" file, so that we can import additional reducers.

import { todosSlice } from './todos/todos.slice';

export const reducer = {
  todos: todosSlice.reducer
};

Now we do not have a todoSlice in our reducer, lets create it:

Step 4: Create a folder "src/store/todos"

This folder will contain all the logic related to "todos slice".

Step 5: Create following files: "index.ts", "todos.initialState.ts", "todos.reducers.ts", "todos.slice.ts"

All todo's logic of the store state(interfaces, reducer, actions, todo slice)

Step 6: Lets start with "todos.slice.ts" in "src/store/todos"

import { createSlice } from '@reduxjs/toolkit';
import { todosInitialState, todosReducer } from '.';

*createSlice - a function that accepts an initial state, an object full of reducer 
functions, and a slice name that automatically generates action creators and action 
types that correspond to the reducers and state.  Internally it uses createAction and createReducer* 

export const todosSlice = createSlice({
  name: 'todos', // name used in action types
  initialState: todosInitialState, // initial state for the reducer
  reducers: todosReducer,
});

export const {
  actions: { // action creators exported from todosSlice.actions available out of the box
    create: createTodoActionCreator
  },
} = todosSlice;

Step 7: Then proceed with our ‘"todos.initialState.ts"’ in "src/todos":

import { v1 as uuid } from 'uuid';
import { ITodo } from '../../type';

export const todosInitialState: ITodo[] = [
  {
    id: uuid(),
    desc: 'Learn Redux-ToolKit',
    isComplete: false,
  },
];

CreateTodo.tsx:

Step 8: Lets add missing information in "src/store/todos/todos.reducer.ts"

Note:
In order to be more consistent it is advisable, for all of the models below to have respective interface. For the purpose of this tutorial some of these parts are simplified.

import { PayloadAction } from '@reduxjs/toolkit';
import { v1 as uuid } from 'uuid';

import { ITodo } from '../../type';

export const todosReducer = {
  create: {
    reducer: (
      state: ITodo[],
      action: PayloadAction<{ id: string; desc: string; isComplete: boolean }>
    ) => {
      state.push(action.payload);
    },
    prepare: ({ desc }: { desc: string }) => ({
      payload: {
        id: uuid(),
        desc,
        isComplete: false,
      },
    }),
  }
};

Step 9: Then exports these files in "src/store/todos/index.ts"

export * from './todos.reducer';
export * from './todos.initialState';
export * from './todos.slice';

Connecting Redux with React Components with useDispatch and useSelector hooks

Step 10: Create a folder "src/components"

All components will be placed there for now.

Step 11: Create a folder "src/app"

Step 12: Move files "App.tsx" and "App.css" into "src/app"

Step 13: Populate "App.tsx" with following peace of code:

import React from 'react';
import { useSelector } from 'react-redux';

import { State } from '../type';
import { CreateTodo, TodoList } from '../components';

import './App.css';

const App = function () {
  const todos = useSelector((state: State) => state.todos);

  return (
    <div className="App">
      <div className="App__header">
        <h1>Redux Toolkit</h1>
        <CreateTodo />
      </div>
      <div className="App__body">
        <TodoList todos={todos} />
      </div>
    </div>
  );
};

export default App;

Step 14: Create following files into "src/components":

CreateTodo.tsx:

import React, { FC, FormEvent, useState, ChangeEvent } from 'react'
import { useDispatch } from 'react-redux';
import { createTodoActionCreator } from '../store/todos';

interface ICreateTodoProps { }

export const CreateTodo: FC<ICreateTodoProps> = () => {
  const dispatch = useDispatch();

  const [newTodoInput, setNewTodoInput] = useState<string>('');

  const handleCreateNewTodo = (e: FormEvent<HTMLFormElement>): void => {
    e.preventDefault();
    if (!newTodoInput.length) return;

    dispatch(createTodoActionCreator({ desc: newTodoInput }));
    setNewTodoInput('');
  };

  const handleNewInputChange = (e: ChangeEvent<HTMLInputElement>): void => {
    setNewTodoInput(e.target.value);
  };

  return (
    <form onSubmit={handleCreateNewTodo}>
      <label htmlFor="new-todo">Add new:</label>
      <input
        onChange={handleNewInputChange}
        id="new-todo"
        value={newTodoInput}
      />
      <button type="submit">Create</button>
    </form>
  )
}

Todo.tsx:

import React, { FC } from 'react'
import { ITodo } from '../type'

interface ITodoProps {
  key: string;
  todo: ITodo
}

export const Todo: FC<ITodoProps> = ({ key, todo }) => <li>{todo.desc}</li>

TodoList.tsx:

import React, { FC } from 'react'
import { ITodo } from '../type'
import { Todo } from '.'

interface ITodoList {
  todos: ITodo[]
}
export const TodoList: FC<ITodoList> = ({ todos }) => {
  return (
    <ul className="App__list">
      <h2>My Todos:</h2>
      {todos &&
        todos.map((todo, i: number) => (
          <Todo key={todo.id} todo={todo} />
        ))}
    </ul>
  )
}

Step 15: Create "type.d.ts" file into root folder:

export interface ITodo {
  id: string;
  desc: string;
  isComplete: boolean;
}

export interface State {
  todos: Todo[];
}

Summary

It’s amazing how simple is to setup Redux in 2020. We used tools Typescript, React Hooks, Redux Toolkit