DEV Community: Dalton Menezes

Introducing Electron Router DOM v2.0 🎉

Dalton Menezes — Thu, 12 Sep 2024 03:58:48 +0000

Two years after the release of version 1.0, I am happy to announce the major version 2.0 of Electron Router DOM! 🎉

The version was rewritten, aiming to improve the developer experience, maintainability, and type inference.
In this post, I will cover the main changes and improvements introduced in version 2.0.

Site, blog, documentation and examples

Now we have a website that has these resources to help you get the most out of the library.

In version 1.0 we only had the README of the repository on GitHub and the actual implementation in the electron-app project as an example.
Which, for many people, was not enough to understand how the library worked in a more complete and intuitive way.

Typing improvements

Now you can have a better development experience where ids and query keys are typed.
This makes development safer and more intuitive, avoiding typing errors, ensuring that you are passing the correct values
and making better use of your code editor's intellisense.

Code rewrite

The library code has been rewritten, aiming at the improvements introduced by React Router v6.4, such as support for Data APIs,
enabling a more sophisticated and productive use of both Electron Router DOM and React Router.

Query strings

You can now use query strings more easily and pass information between the main and renderer process.

API simplification

The API has been simplified to make it easier to use and understand the library.
The createFileRoute and createURLRoute functions have been removed, you can now use the registerRoute method returned by the createElectronRouter function instead.

What was done this way before:

src/main/index.ts

  const devServerURL = createURLRoute('http://localhost:3000', id)

  const fileRoute = createFileRoute(
    join(__dirname, '../renderer/index.html'),
    id
  )

  process.env.NODE_ENV === 'development'
    ? window.loadURL(devServerURL)
    : window.loadFile(...fileRoute)

Now it will be done like this:

  registerRoute({
    id: 'main',
    browserWindow: window,
    htmlFile: path.join(__dirname, '../renderer/index.html'),
  })

You no longer need to worry about the logic of loading the development server URL or the application HTML file, Electron Router DOM will take care of it for you.

Another change is that the Route component is no longer exported from the electron-router-dom package, but rather from the react-router-dom package, making it clearer and simpler to know what to use from each library.

Conclusion

With these improvements, it was necessary to change the way you create the router. And it was necessary to update the minimum required versions of the dependencies to take full advantage of the new features introduced in React Router v6.4, causing breaking changes!

I know, breaking changes always bring discomfort and, believe me, it was not an easy decision, but it will bring greater experience and evolution to your projects.

That said, don't worry, the migration process is very simple and you can check out the migration guide I prepared for more details:

Migrating to v2

I hope you enjoy the changes and that they make developing Electron applications with React more enjoyable and productive.

Thank you for using Electron Router DOM! 💛

interprocess: 💬 A scalable and type-safe Electron IPC management tool with enhanced DX

Dalton Menezes — Mon, 21 Nov 2022 22:31:51 +0000

Electron IPC is good, but difficult to maintain and scale, either because of the numerous channels you have to remember, or because of the inconsistent API between processes and the absence of inferred types of your channels and handlers. These are some of the things that interprocess comes to solve!

💬 Features

🚀 Best-in-class DX with a fully-typed API
🧠 Enchanced and consistent API
🔥 Type-safe and scalable
🪄 Code splitting support
🕸️ All edges connected (APIs to handle all processes)
💖 invoke and handle methods in both processes with the same expected behavior

💬 Installation

In your terminal, run:

yarn add interprocess

# OR

npm i interprocess

💬 Usage

Let's build something simple that can show you some of the interprocess's power!

First, create the following folders at src:

shared/ipcs (this folder structure is optional)

Then, create a file named as index.ts in the ipcs folder with the following content:

import { createInterprocess } from 'interprocess'

export const { ipcMain, ipcRenderer, exposeApiToGlobalWindow } =
  createInterprocess({
    main: {
      async getPing(_, data: 'ping') {
        const message = `from renderer: ${data} on main process`

        console.log(message)

        return message
      },
    },

    renderer: {
      async getPong(_, data: 'pong') {
        const message = `from main: ${data} on renderer process`

        console.log(message)

        return message
      },
    },
  })

On the main process:

import { BrowserWindow, app } from 'electron'

import { ipcMain } from 'shared/ipcs'

const { handle, invoke } = ipcMain

app.whenReady().then(() => {
  const mainWindow = new BrowserWindow({
    webPreferences: {
      preload: path.join(__dirname, '../preload/index.js'),
      sandbox: false, // sandbox must be false
    },
  })

  handle.getPing()

  mainWindow.webContents.on('dom-ready', () => {
    invoke.getPong(mainWindow, 'pong')
  })
})

In the preload script:

import { exposeApiToGlobalWindow } from 'shared/ipcs'

const { key, api } = exposeApiToGlobalWindow({
  exposeAll: true, // expose handlers, invokers and removers
})

declare global {
  interface Window {
    [key]: typeof api
  }
}

On the renderer process:

const { invoke, handle } = window.api

invoke.getPing('ping')
handle.getPong()

This is a simple way to work with interprocess, but there's a lot of more cool features you can take advantage, like overrides, code splitting, invoker's response (for renderer and main process 🎉) and more. See the Knowledge section for more!

💬 Knowledge

useExitIntent - A React Hook to handle exit intent strategies

Dalton Menezes — Mon, 07 Nov 2022 11:49:05 +0000

The Exit Intent strategy is a great way to increase your conversion rate. That strategy is commonly used to show a modal/popup when the user is about to leave your website.

useExitIntent hook is simple to use and you can customize it to your needs. Here are the main features:

🚀 Multiple handlers can be registred
🔥 Highly configurable
🧠 Different strategies for Desktop and Mobile
⛔️ Unsubscription support with cookies
🎉 Built with TypeScript

Installation

yarn

yarn add use-exit-intent

npm

npm i use-exit-intent

Importing

import { useExitIntent } from 'use-exit-intent'

Using

In your React component:

export function App() {
  const { registerHandler } = useExitIntent()

  registerHandler({
    id: 'openModal',
    handler: () => console.log('Hello from handler!')
  })

  // ...
}

To get more knowledge about this hook:

Electron Router DOM is here!

Dalton Menezes — Tue, 20 Sep 2022 15:17:22 +0000

If you've already tried using react-router-dom with Electron, had difficulties getting it to work both in development and in production and in different windows, this library is for you 🚀

Features

🚀 Ready for Development and Production environments
🔥 Works on Multiple windows
📦 Isolated routes by window id

Installation

In your terminal, run:

yarn add electron-router-dom

# OR

npm i electron-router-dom

Router DOM is a peer dependency, if you haven't installed it yet or your package manager won't handle it automatically for you, so run:

yarn add react-router-dom

# OR

npm i react-router-dom

Usage

The main thing to keep in mind is: you must use the same window id in the Electron Main Process used in createFileRoute and createURLRoute functions and in the Electron Renderer Process in the <Router> component prop names.

Electron Main Process

import {
  app,
  BrowserWindow,
  BrowserWindowConstructorOptions as WindowOptions,
} from 'electron'

import { createFileRoute, createURLRoute } from 'electron-router-dom'
import { join } from 'path'

function createWindow(id: string, options: WindowOptions = {}) {
  const window = new BrowserWindow({
    width: 700,
    height: 473,
    ...options,
  })

  const devServerURL = createURLRoute(process.env['ELECTRON_RENDERER_URL']!, id)

  const fileRoute = createFileRoute(
    join(__dirname, '../renderer/index.html'),
    id
  )

  process.env.NODE_ENV === 'development'
    ? window.loadURL(devServerURL)
    : window.loadFile(...fileRoute)

  return window
}

app.whenReady().then(() => {
  createWindow('main', {
    webPreferences: {
      preload: join(__dirname, '../preload/index.js'),
    },
  })

  createWindow('about', {
    width: 450,
    height: 350,
    show: false,
  })
})

Electron Renderer Process

Create a routes.tsx file:

import { Router, Route } from 'electron-router-dom'

import { MainScreen, AboutScreen, SearchScreen } from './screens'

export function AppRoutes() {
  return (
    <Router
      main={
        <>
          <Route path="/" element={<MainScreen />} />
          <Route path="/search" element={<SearchScreen />} />
        </>
      }
      about={<Route path="/" element={<AboutScreen />} />}
    />
  )
}

Then, import the AppRoutes in your index.tsx:

import ReactDom from 'react-dom/client'
import React from 'react'

import { AppRoutes } from './routes'

ReactDom
  .createRoot(document.querySelector('app') as HTMLElement)
  .render(
    <React.StrictMode>
      <AppRoutes />
    </React.StrictMode>
  )

A simple example of a MainScreen component:

import { useNavigate } from 'react-router-dom'

// The "App" comes from the context bridge in preload/index.ts
const { App } = window

export function MainScreen() {
  const navigate = useNavigate()

  return (
    <main>
      <button onClick={() => navigate('/search')}>Go to Search screen</button>

      <button onClick={App.OpenAboutWindow}>Open About window</button>
    </main>
  )
}

To get more knowledge about this library, please,
check the Electron Router DOM GitHub Repository

Thanks 💜

A fresh new Electron app boilerplate

Dalton Menezes — Fri, 18 Feb 2022 02:55:55 +0000

Hi there, I'm back here to introduce you to electron-app, a ready-to-go with a well-thought-out structure Electron app boilerplate with ReactJS, TypeScript, CSS / SASS modules, SWC, Eslint, Prettier and more.

I really spent a lot of time thinking about this structure and tried to make it the way I felt most productive taking the readability and health of both the code and the structure and with features that I didn't find in the current boilerplates available today. That said, here's some information:

Features

Stands out
- 🔥 Ready-to-go with a well-thought-out structure
- 🚀 Auto reload for main and Hot for renderer process
- 🎉 Window and Screen routing included
- 😎 Bridge already configured
- 🙀 IPC communication included
- 🍪 Absolute paths supported
Technologies
- 🔋 Electron
- 🔥 ReactJS
- 🌎 React Router DOM
- 🧐 React Developer Tools
- 💙 TypeScript
- 📦 Webpack
- ⚡️ SWC as compiler
- ✨ CSS / SASS modules
- 💫 Eslint / Prettier / EditorConfig / Husky / lint-staged / Commitlint
- 📦 Electron Builder

That's the current structure overview:



src
├── main
│   ├── factories
│   │   ├── index.ts
│   │   ├── ipcs
│   │   │   └── register-window-creation.ts
│   │   ├── setup.ts
│   │   └── windows
│   │       └── create.ts
│   ├── index.ts
│   └── windows
│       ├── About
│       │   ├── index.ts
│       │   └── ipcs
│       │       ├── index.ts
│       │       └── register-window-creation.ts
│       ├── Main
│       │   └── index.ts
│       └── index.ts
├── renderer
│   ├── assets
│   │   └── images
│   │       └── illustration.svg
│   ├── bridge
│   │   ├── index.ts
│   │   └── ipcs
│   │       ├── about-window
│   │       │   ├── create.ts
│   │       │   └── when-close.ts
│   │       └── index.ts
│   ├── components
│   │   ├── Button
│   │   │   ├── index.tsx
│   │   │   └── styles.module.sass
│   │   ├── Container
│   │   │   ├── index.tsx
│   │   │   └── styles.module.sass
│   │   ├── Heading
│   │   │   ├── index.tsx
│   │   │   └── styles.module.sass
│   │   └── index.ts
│   ├── index.html
│   ├── index.tsx
│   ├── routes
│   │   ├── index.tsx
│   │   └── modules
│   │       └── index.tsx
│   ├── screens
│   │   ├── About
│   │   │   ├── index.tsx
│   │   │   └── styles.module.sass
│   │   ├── Another
│   │   │   └── index.tsx
│   │   ├── Main
│   │   │   └── index.tsx
│   │   └── index.ts
│   ├── store
│   │   └── index.tsx
│   └── styles
│       ├── animations.sass
│       ├── globals.sass
│       └── resets.sass
├── resources
│   └── icons
│       ├── icon.icns
│       └── icon.ico
└── shared
    ├── constants
    │   ├── environment.ts
    │   ├── index.ts
    │   ├── ipc.ts
    │   └── platform.ts
    ├── index.ts
    └── types
        └── index.ts

What do you think? If you are interested, you can access the boilerplate GitHub repository where there is more information on how to use it, such as creating windows and taking advantage of factories already available, about routing and more.

Thanks 💜

Dealing with Discord Malicious Domains

Dalton Menezes — Wed, 02 Feb 2022 01:02:56 +0000

Hi there, all of us as Discord users know how difficult it can be to deal with malicious Discord domains on a daily basis, especially fake Discord Nitro ones, with that in mind I'm back now to quickly show you about two of my latest projects published today:

Discord Guardian Action

🤖 An action that fetches the list of malicious domains on Discord in different providers and creates/updates a JSON file with them from time to time.

Features:

🤠 Creates/updates domain list from different providers
✨ Accepts your own maintained list file to be joined in the domains.json
👍 Accepts the custom filename and directory to save the domain list

Discord Malicious Domains

🤖 A list of malicious domains on Discord using the Discord Guardian Action.

The Discord Guardian Action will try to run at minute 0 past every hour, trying to update the list to give you always an updated one.

The list can be used for your BOT to check and delete the messages containing that malicious domains, or even to BAN that infected user. Discord Guardian Action is licensed under MIT license, written in TypeScript and compiled with Vercel's ncc tool.

Both projects are only possible thanks to the following ones, don't forget to give them a star if the list was useful to you:

Thanks 💜

Aura Theme v2.0.0 is out now! 🥳 🎉

Dalton Menezes — Tue, 12 Oct 2021 00:32:54 +0000

Hi folks, I'm glad to share with you Aura Theme v2.0.0 with a lot of cool new features.

The entire project was recreated from scratch using TypeScript
Color schemes have been improved
Added Aura CLI
Added Aura API
New ports have been added, the current full list of ports is:
- Visual Studio Code
- Sublime Text
- CodeSandbox
- Hyper
- Windows Terminal
- Alacritty
- iTerm
- rxvt-unicode
- Terminal.app
- GNOME Terminal
- Kitty
- Chrome
- Firefox
- Vivaldi
- Insomnia
- Telegram Desktop
- Slack

And more ports will come soon! 🚀

You can find all themes at:
https://github.com/daltonmenezes/aura-theme

Now, let's take a look at some of the available ports:

Visual Studio Code

Hyper terminal

Insomnia

Firefox

I hope you guys enjoy it as much as I do 💜

The repo is participating in the Hacktoberfest, so If you would like to contribute by creating new ports, you can open an issue or get an existing one asking for it and reading the docs, also you can reach me here or on GitHub if you need some help. 💜

DEV Community: Dalton Menezes

Introducing Electron Router DOM v2.0 🎉

Site, blog, documentation and examples

Typing improvements

Code rewrite

Query strings

API simplification

Conclusion

Links

interprocess: 💬 A scalable and type-safe Electron IPC management tool with enhanced DX

💬 Features

💬 Installation

💬 Usage

💬 Knowledge

useExitIntent - A React Hook to handle exit intent strategies

Installation

yarn

npm

Importing

Using

Electron Router DOM is here!

Features

Installation

Usage

Electron Main Process

Electron Renderer Process

A fresh new Electron app boilerplate

Features

Dealing with Discord Malicious Domains

Discord Guardian Action

Discord Malicious Domains

Aura Theme v2.0.0 is out now! 🥳 🎉

Visual Studio Code

Hyper terminal

Insomnia

Firefox