DEV Community: Hemand S

The power of TypeScript Generics and Conditional Types

Hemand S — Thu, 14 Jul 2022 10:48:09 +0000

While developing the react hooks for engagespot, I came across a complex use case.

useEngagespot is a hook/function which takes multiple arguments and returns an object. The properties returned by useEngagespot() depend on plugins, passed through the argument. If you've ever used react-table, you might be familiar with this pattern.

For example,
If I pass useInfiniteScroll in the plugins array, I should get back hasMore and setLoaderRef properties along with the other common properties. Or if I pass useFloatingNotification, I should get getButtonProps and getPanelProps as return properties. Or, if I pass both useInfiniteScroll and useFloatingNotification, I should get all the properties.

There are lots of permutations, combinations, and other fine details, but this is the essence of it.

const {notifications, setLoaderRef, hasMore} = useEngagespot({userId, apiKey, plugins: [useInfiniteScroll]})


const {notifications, getButtonProps, getPanelProps} = useEngagespot({userId, apiKey, plugins: [useFloatingNotification]})

const {notifications, setLoaderRef, hasMore, getButtonProps, getPanelProps} = useEngagespot({userId, apiKey, plugins: [useInfiniteScroll, useFloatingNotification]})

I would love to go more deeply into why this pattern is a beast, but we'll save that for another post. For now, know it was working fine and solving the problems it was meant to solve... in JavaScript at least.
The real challenge was to set the correct return type based on the function arguments in TypeScript. So that we can get the "IntelliSense" working in VSCode and not need to worry about looking at the docs for return types. I tried different approaches, but none of them were perfect. I decided to give up and ended up settling for passing a static return type that had all the properties always regardless of the plugins.

But I was still not satisfied with how it turned out. I decided to try something else. It turns out I was not even close to utilizing the true power of TypeScript. I got exactly what I wanted by using Generics and Conditional Types

Generics

Generics allow "components" to work over a variety of types rather than a single one. This allows users to consume these components and use their own types.

Let's look more into what it means.

Imagine you have an identity function that can take some values and return the same value.

function identity(values) {
    return value
}

const idNum = identity(5)
const idStr = identity("Hello World")
const idObj = identity({foo: "bar"})

As you can see, I can pass any value that returns the same value with the same type.
If I want to create the same function in TypeScript, how would I do that? One way is to set values as any so that it can accept any value. But doing that would lose our original type definition. The proper way to do this is via generics.

function identity<T>(values: T): T {
    return values;
}

const idNum = identity(5) // returns number
const idStr = identity("Hello World") // returns string
const idObj = identity({foo: "bar"}) // returns object

The identity function takes a "generic parameter T," which we assign as the type of values and the function's return type.

When the function gets called with some value, the TypeScript compiler dynamically asserts the value type and passes it to T.

Generics are a powerful feature that can do much more. You can read more about them here

Conditional Types

Conditional types help describe the relation between the types of inputs and outputs.

Let's look at an example from the TypeScript docs,

interface IdLabel {
  id: number /* some fields */;
}
interface NameLabel {
  name: string /* other fields */;
}

function createLabel(id: number): IdLabel;
function createLabel(name: string): NameLabel;
function createLabel(nameOrId: string | number): IdLabel | NameLabel;

createLabel() takes either a string or number as an argument and should return an object with an id property if the argument is of type number. Else it should return another object with the name property.

As we see above, we used function overloading to do this. Although this works, it's not scalable. As new types come, we would end up writing more and more overloaded function definitions.

What if there was a way to dynamically determine the type to return based on the argument type. Well, that's precisely what conditional types help us to do.

type NameOrId<T extends number | string> = T extends number
  ? IdLabel
  : NameLabel;

function createLabel<T extends number | string>(idOrName: T): NameOrId<T> {
  throw "unimplemented";
}

Let's go through it to see what it is doing.

We defined a type called NameOrId, which takes a generic parameter T with a type constraint that says T can either be a string or a number. On the RHS, we use the conditional type syntax that says, "if T is string, use the interface IdLabel as the type for NameOrId. Else use NameLabel.

By using conditional types, we've eliminated the usage of multiple overloaded functions and kept our code DRY. Yay!

The TypeScript docs cover conditional types in much more detail. Check it out here.

Piecing everything together

Now that we know about Generics and Conditional Types, let's combine them and see how we can solve our problem.

Since it's too long to type out the whole thing here, I embedded a code sandbox playground to check it out.

Side note: The typescript errors do not show up in the embedded version. Open the sandbox in a new window to see it correctly.

Amp up your React workflow with these "Gen Z" toolings

Hemand S — Tue, 28 Jun 2022 18:29:28 +0000

When I started learning React, Create React App was my go-to for quickly scaffolding new projects. There was a certain simplicity to it which made it easy to set up projects without writing complex configurations. Or in other words, I was too dumb to understand the Webpack and Rollup configurations.

As I started using CRA for more projects, I realized it was not as fast as I wanted it to be. This became more evident in larger projects where I had lots of dependencies. npm was another culprit who ate Giga bytes of storage on my machine and took ages to finish installing the dependencies.
The whole thing had become a mess, so I decided to look for other alternatives. Little did I know I was sitting under a rock for this long. There were so many options to choose from on the tooling side. I felt like I had aged 40 years suddenly. Then I realized time works differently in JS land. It's said that a new framework gets born every time you blink an eye.

To recap, these were the tools I was currently using.

Create React App for development
npm as package manager
jest for running tests

And these were the things I was looking for

A faster build and development system while still having the simplicity of CRA
A faster, efficient package manager which doesn't eat up my storage
A faster test runner/ framework?

Luckily, I've found solutions to all the three problems, and I've to say that my new workflow is "blazingly fast" 🔥
I never felt so alive!

Vite for development

CRA uses Webpack under the hood, creating a "bundle" when we run the npm start command. During this time, Webpack crawls through our project and its dependencies and creates a single Javascript file(in most cases), which contains all the necessary code and starts the development server. The main drawback with the above approach is that Webpack would need to recreate the bundle whenever there's some change in our project code. Optimization techniques like Hot Module Replacement (HMR) try to solve these issues in one way or another. Still, the takeaway here is that as you keep adding 'xstate', styled-components, lodash, or whatever it is you're adding these days, you end up with a boatload of dependencies, and the bundling starts slowing down gradually till it kills the DX making you rage quit your project for good. Jeez, What a nightmare!

Luckily, Vite solves this issue by leveraging native ES Modules in the browser, using more faster bundler like esbuild and doing something called pre-bundling

I don't want to dive into the specifics here, but the basic idea here is that vite improves the dev server start time by dividing the modules in an application into two categories: dependencies and source code. Since the dependencies don't change that often, they can be bundled once and kept in a separate cache. And since everything is served as native ES Modules, we get additional benefits like HTTP caching.

Want more reason to switch to Vite?

Apart from the performance, another reason why I love using vite is its OOTB support for TypeScript, SASS, LESS, SCSS, and a lot more. If you were to use LESS with CRA, you'd end up with solutions like craco and react-rewired, which are honestly not that fun to use. Vite also supports a robust plugin system to add additional loaders.

Even more?

Here's a tweet from the creator himself asking the React team to update the new docs to recommend Vite over CRA

Evan You

@youyuxi

Here’s a proposal: the new React docs should recommend Vite over CRA for beginners - or at least recommend a custom Vite based template if ESLint / testing are required (also should use Vitest instead of Jest)

15:41 PM - 24 Jun 2022

Seriously, switch to Vite; you won't regret it.

You can get started simply by running.

npm create vite@latest my-react-app -- --template react

pnpm, the npm killer?

node_modules eating up your disk space has become such a meme that even people from the non-tech community know about it at this point. Seriously though, my sheer frustration with npm and node_modules was enough to stop the project I was working on and throw away my old Mac. And when I did buy the shiny new M1 Macbook Pro, I decided to give my project another try. After all, I can't justify my reasoning for spending 2000$ just to watch Netflix, right?

This time I wanted to switch things a bit, and that's when I found pnpm, the long-lost cousin to npm. I was sold the moment I saw the caption on their website

Fast, disk space efficient package manager

I decided to give pnpm a try on my good ol' project.

npm install -g pnpm
cd my-react-project
pnpm install
pnpm start

To my surprise, everything went smoothly and started working without any issues. The installation was fast, and the node_modules folder this time was less chunky.

Again, I won't try to explain the how's and what's here; head over to pnpm site to understand how exactly it solves this problem. But in a nutshell, pnpm avoids cloning copies of the same dependencies multiple times; instead, it keeps a content-addressable store to only keep the changed files of the newer version. This is what makes it fast and efficient.

There are many other features supported by pnpm like workspaces, hoisting, overrides ...

If you're starting a new React project, you can use pnpm and vite together using
pnpm create vite.

vitest

I never had that much of a problem with jest, to be honest. Sure, doing the initial configuration and setting up ts-jest for Typescript projects has been a pain point sometimes, but it was never enough to hate it. The APIs are great, I love writing snapshot testing and unit testing with it. The only reason I moved from jest to vitest is because of vite itself.
Here's a direct excerpt from the vitest site talking about the motivation behind its creation

in a world where we have Vite providing support for the most common web tooling (typescript, JSX, most popular UI Frameworks), Jest represents a duplication of complexity. If your app is powered by Vite, having two different pipelines to configure and maintain is not justifiable. With Vitest you get to define the configuration for your dev, build and test environments as a single pipeline, sharing the same plugins and the same vite.config.js.

This! This is the exact reason I switched to vitest. Since I already started using vite for projects and since vite and vitest go well hand in hand, I didn't need these complicated jest config files and ts-jest just to run my tests. I can run my tests without writing any additional configuration. And it provides first-class support for TypeScript.

To get started with vitest, go to your project and

npm install -D vitest

or with pnpm

pnpm add -D vitest

Once it's installed, update the "test" script in package.json to use vitest instead of jest, and you're done!

I've created a sample repo with React, pnpm, vite and vitest configured. You can check it out here

There, you're back with the cool kids again. But don't get too ahead of yourselves. Better and better things are coming. The only thing you can do is to keep on learning.

"once you stop learning, you start dying" - Albert Einstein

Build a full-fledged notification center on your React App using Engagespot (Part 1)

Hemand S — Sun, 06 Feb 2022 11:16:28 +0000

Build a Notification Center for your Next.js Blog (3 Part Series)
`1.`Creating the basic blog structure and integrating the Notification Component using `@engagespot/react-component`
2. Backend support for Like, Follow, Comments
3. Implementing View All Notification Page using `@engagespot/react-hooks`
4. Bonus - Supporting android and ios using react-native

It's no secret that notifications have become an integral part of our lives. Whether it's to inform someone liked your photo on Instagram or to notify that your order is coming soon, the Notification and Notification center has been evolved into a humongous beast in today's world.

Due to the sheer complexity involving notifications, implementing it from scratch is nothing short of a challenge itself. Creating the notification center UI, implementing WebPush, Email fallbacks, adding multiple channels... The list goes on and on...

Engagespot makes it easy to add in-app notification widget, real-time, and push notification features to your product with just a few lines of code.

Disclamer: I am one of the maintainers of Engagespot

In this 3 part series, we will create a simple blog site where users can add posts, like, comment, and follow other authors. We will have a notification center at the top, which will send out notifications for the above cases. The first part will focus on creating the basic blog site and adding the notification center component. I will be updating links to the upcoming articles above as it goes live. So without further ado, let's get started.

Creating the Blog Site

We'll be using Next.js and Supabase as our tech stack. I won't be focusing too much on the implementation details of the blog, but if you want to follow along, do
and do

git clone https://github.com/hemandev/blog-with-notifications
cd blog-with-notifications
git checkout tags/blog_starter
npm i
npm run dev

Make sure to populate the superbase URL and keys before starting the server.

Here's how the DB schema for the blog looks like

I was using Supabase Visualizer for generating the schema, and it was not able to detect the default user table)

Let's take a look at our current blog.

So far, we have implemented the basic functionalities like authentication, creating new articles, adding comments, following...

Everything looks good so far. The next step is to add in the notifications. Let's go to Engagespot Website and set up a free account

After signing up, create a new app called "My Blog App," copy the API key and secret and keep it for later.

Add the Enagegspot React component as a dependency in our Next.js project.

npm i @engagespot/react-component

I want the notification button to come on the top navigation. So let's add it into the header component.

//components/header.tsx
import { Auth } from '@supabase/ui'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { supabaseClient } from '../lib/supabase/client'
import { Engagespot } from '@engagespot/react-component'
import { User } from '@supabase/supabase-js'

interface HeaderProps {
  user: User
}

function Header({ user }: HeaderProps) {
  //const { user, session } = Auth.useUser()
  const router = useRouter()
  return (
    <header className="pb-6">
      <nav className="flex gap-4 items-center">
        <Link href="/">
          <a>Home</a>
        </Link>
        <button onClick={() => router.push(`/profile/${user?.email}`)}>
          Profile
        </button>
        <Link href="/posts">
          <a className="mr-auto">Posts</a>
        </Link>
        <Engagespot
          apiKey={process.env.NEXT_PUBLIC_ENGAGESPOT_API_KEY}
          userId={user?.email || ''}
        />
        <Link href="/create-new">
          <a className="bg-emerald-500 hover:bg-emerald-600 ease-in transition-all py-2 px-4  rounded text-white">
            Create New
          </a>
        </Link>
        <button
          onClick={async () => {
            const { error } = await supabaseClient.auth.signOut()
            if (error) console.log('Error logging out:', error.message)
          }}
        >
          Logout
        </button>
      </nav>
    </header>
  )
}

export default Header

Voila! Instant Notification Center!

Let's break down what just happened.

We imported the Engagespot /> component on our <Header/>.
Engagespot expects apiKey and userId as mandatory properties. apiKey is the one we copied over from the dashboard. userId can be anything that can be used to identify a user uniquely. I'm passing email as the userId, but you can pass UUID, username, or any other unique field as well. On getting the userId, Engagespot will automatically create a user record in its system if it isn't already there. We can even pass additional user attributes which can define a user even more, and Engagespot can use it for more powerful features like notification grouping, mentioning, etc...

There are many other properties that we can use to customize the default behaviors. Head to the docs section for the complete list of properties. Once you're done exploring, let's try sending a notification to see how it's coming.

Sending Notifications from the Dashboard

Now that we integrated the notification component into your app let's try sending a notification and see how it's coming.
We haven't integrated the API to send out the notifications. Luckily, we can use the Compose feature to send notifications directly without needing to configure any API. This can be useful for testing and other cases where you need to send targeted notifications to some users.

Head into the Compose section and start adding the details regarding the recipient, title, and content.

The title and content fields support Rich Text so that we can be creative with our notification content. Click on Submit and go back to your site.

Looks pretty sick!

Let's head to the final section, where we'll customize the Notification Center and make it truly belong to our site belong.

Styling the Notification Center

Engagespot supports a theme property that allows extensive customizations on the look and feel of its Notification Center component. Again, head to the docs to get a complete picture of what all can be customized. Or, if you're using VSCode and Typescript, you can rely on the type definitions from the @engagespot/react-component package and keep experimenting as you go along.

Right now, I am just mainly looking to change the notification icon color to black and the header to RGB(16 185 129) to align with our site more. Let's see how to do that.

<Engagespot
          apiKey={process.env.NEXT_PUBLIC_ENGAGESPOT_API_KEY}
          userId={user?.email || ''}
          theme={{
            panel: {
              height: '35rem',
              width: '27rem',
            },
            notificationButton: {
              iconFill: '#000'
            },
            colors: {
              brandingPrimary: 'rgb(16 185 129)',
            },
            header: {
              height: '2.5rem',
            },
            footer: {
              height: '2.5rem'
            }
          }}
        />

As you can see, while I was at it, I just changed the panel, header, and footer width so that it looks cleaner in our small width site.

Let's check out the final result.

Now that's more like it!

Here's the final code for the Header component

import { Auth } from '@supabase/ui'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { supabaseClient } from '../lib/supabase/client'
import { Engagespot } from '@engagespot/react-component'
import { User } from '@supabase/supabase-js'

interface HeaderProps {
  user: User
}

function Header({ user }: HeaderProps) {
  //const { user, session } = Auth.useUser()
  const router = useRouter()
  return (
    <header className="pb-6">
      <nav className="flex gap-4 items-center">
        <Link href="/">
          <a>Home</a>
        </Link>
        <button onClick={() => router.push(`/profile/${user?.email}`)}>
          Profile
        </button>
        <Link href="/posts">
          <a className="mr-auto">Posts</a>
        </Link>
        <Engagespot
          apiKey={process.env.NEXT_PUBLIC_ENGAGESPOT_API_KEY}
          userId={user?.email || ''}
          theme={{
            panel: {
              height: '35rem',
              width: '27rem',
            },
            notificationButton: {
              iconFill: '#000'
            },
            colors: {
              brandingPrimary: 'rgb(16 185 129)',
            },
            header: {
              height: '2.5rem',
            },
            footer: {
              height: '2.5rem'
            }
          }}
        />
        <Link href="/create-new">
          <a className="bg-emerald-500 hover:bg-emerald-600 ease-in transition-all py-2 px-4  rounded text-white">
            Create New
          </a>
        </Link>
        <button
          onClick={async () => {
            const { error } = await supabaseClient.auth.signOut()
            if (error) console.log('Error logging out:', error.message)
          }}
        >
          Logout
        </button>
      </nav>
    </header>
  )
}

export default Header

You can get the full project from https://github.com/hemandev/blog-with-notifications

Conclusion

I am going to stop for now but we haven't event scratched the surface of Engagespot yet! In the next article we'll see how to integrate APIs to send notifications when someone follows you or when someone like and comment on your post. We'll also see cover Desktop Notifications, Email fallbacks, Category specific preferences and much more!