DEV Community: Simon Boisset

i18n: The Type-Safe Approach

Simon Boisset — Fri, 19 Jul 2024 22:02:46 +0000

Internationalization (i18n) is a crucial aspect of modern web development. This article explores how to implement a type-safe i18n solution using the typed-locale library in a React application.

Introduction to typed-locale

typed-locale is a lightweight, type-safe internationalization library designed to work with TypeScript. It provides an API for managing translations with type safety for both keys and variables.

Setting Up the Project

Let's create a new React project using Vite with TypeScript:

npm create vite@latest my-i18n-app -- --template react-ts
cd my-i18n-app
npm install

Now, install typed-locale:

npm install typed-locale

Defining Translations

Create a new file called translations.ts in the src folder:

// src/translations.ts
import { InferTranslation, plural } from 'typed-locale';

export const en = {
  greeting: 'Hello, {{name}}!',
  itemCount: plural({
    none: 'You have no items.',
    one: 'You have one item.',
    other: 'You have {{count}} items.',
  }),
  nav: {
    home: 'Home',
    about: 'About',
    contact: 'Contact',
  },
} as const;

export type Translation = InferTranslation<typeof en>;

export const fr: Translation = {
  greeting: 'Bonjour, {{name}} !',
  itemCount: plural({
    none: 'Vous n'avez aucun article.',
    one: 'Vous avez un article.',
    other: 'Vous avez {{count}} articles.',
  }),
  nav: {
    home: 'Accueil',
    about: 'À propos',
    contact: 'Contact',
  },
};

Creating the Translator

Now, let's create a custom hook to use our translations. Create a new file called useTranslator.ts:

// src/useTranslator.ts
import { createTranslatorFromDictionary } from "typed-locale";
import { useMemo } from "react";
import { en, fr, Translation } from "./translations";

const dictionary = { en, fr };

export const useTranslator = (locale: keyof typeof dictionary) => {
  return useMemo(
    () =>
      createTranslatorFromDictionary<Translation>({
        dictionary,
        locale,
        defaultLocale: "en",
      }),
    [locale]
  );
};

Using the Translator in Components

Now, let's use our translator in a React component. Update your App.tsx:

// src/App.tsx
import React, { useState } from "react";
import { useTranslator } from "./useTranslator";

const App: React.FC = () => {
  const [locale, setLocale] = useState<"en" | "fr">("en");
  const [itemCount, setItemCount] = useState(0);
  const translator = useTranslator(locale);

  return (
    <div>
      <select
        value={locale}
        onChange={(e) => setLocale(e.target.value as "en" | "fr")}
      >
        <option value="en">English</option>
        <option value="fr">Français</option>
      </select>

      <nav>
        <ul>
          <li>{translator((t) => t.nav.home)}</li>
          <li>{translator((t) => t.nav.about)}</li>
          <li>{translator((t) => t.nav.contact)}</li>
        </ul>
      </nav>

      <h1>{translator((t) => t.greeting, { name: "World" })}</h1>

      <p>{translator((t) => t.itemCount, { count: itemCount })}</p>
      <button onClick={() => setItemCount(itemCount + 1)}>Add Item</button>
      <button onClick={() => setItemCount(Math.max(0, itemCount - 1))}>
        Remove Item
      </button>
    </div>
  );
};

export default App;

Type Safety Features

typed-locale provides several type safety features:

Autocomplete for translation keys: The IDE provides autocomplete suggestions for all available translation keys.
Type checking for variables: TypeScript catches incorrect variable usage:

   // This will cause a TypeScript error
   translator((t) => t.greeting, { wrongVariable: "World" });

Nested translations: The type system understands nested translations, allowing translator(t => t.nav.home).
Pluralization: The itemCount translation demonstrates how typed-locale handles pluralization, automatically selecting the correct plural form based on the count value.

Technical Advantages

The type-safe approach using typed-locale offers several technical advantages:

Compile-time error detection: Translation-related errors are caught during compilation rather than at runtime.
Improved developer experience: Autocomplete for translation keys enhances productivity.
Refactoring support: TypeScript's refactoring tools work seamlessly with the translation keys.
Prevents key typos: The callback approach eliminates string typos in translation keys.
Small bundle size: At 1kB, typed-locale has minimal impact on application size.
Framework agnostic: While this example uses React, typed-locale can be used with any JavaScript framework or vanilla JS.

Conclusion

Implementing i18n with a type-safe approach using typed-locale provides a robust solution for managing translations in TypeScript projects. By leveraging the type system, developers can create more reliable internationalized applications while maintaining code quality and productivity.

Sauver mon i18n en le typant

Simon Boisset — Fri, 19 Jul 2024 21:59:35 +0000

L'internationalisation (i18n) est un aspect crucial du développement web moderne. Cet article explore comment implémenter une solution i18n typée en utilisant la bibliothèque typed-locale dans une application React.

Introduction à typed-locale

typed-locale est une bibliothèque d'internationalisation légère et typée, conçue pour fonctionner avec TypeScript. Elle fournit une API pour gérer les traductions avec une sécurité de type pour les clés et les variables.

Mise en place du projet

Créons un nouveau projet React en utilisant Vite avec TypeScript :

npm create vite@latest my-i18n-app -- --template react-ts
cd my-i18n-app
npm install

Maintenant, installons typed-locale :

npm install typed-locale

Définition des traductions

Créez un nouveau fichier appelé translations.ts dans le dossier src :

// src/translations.ts
import { InferTranslation, plural } from 'typed-locale';

export const en = {
  greeting: 'Hello, {{name}}!',
  itemCount: plural({
    none: 'You have no items.',
    one: 'You have one item.',
    other: 'You have {{count}} items.',
  }),
  nav: {
    home: 'Home',
    about: 'About',
    contact: 'Contact',
  },
} as const;

export type Translation = InferTranslation<typeof en>;

export const fr: Translation = {
  greeting: 'Bonjour, {{name}} !',
  itemCount: plural({
    none: 'Vous n'avez aucun article.',
    one: 'Vous avez un article.',
    other: 'Vous avez {{count}} articles.',
  }),
  nav: {
    home: 'Accueil',
    about: 'À propos',
    contact: 'Contact',
  },
};

Création du traducteur

Créons maintenant un hook personnalisé pour utiliser nos traductions. Créez un nouveau fichier appelé useTranslator.ts :

// src/useTranslator.ts
import { createTranslatorFromDictionary } from 'typed-locale';
import { useMemo } from 'react';
import { en, fr, Translation } from './translations';

const dictionary = { en, fr };

export const useTranslator = (locale: keyof typeof dictionary) => {
  return useMemo(() => 
    createTranslatorFromDictionary<Translation>({
      dictionary,
      locale,
      defaultLocale: 'en',
    }),
    [locale]
  );
};

Utilisation du traducteur dans les composants

Maintenant, utilisons notre traducteur dans un composant React. Mettez à jour votre App.tsx :

// src/App.tsx
import React, { useState } from 'react';
import { useTranslator } from './useTranslator';

const App: React.FC = () => {
  const [locale, setLocale] = useState<'en' | 'fr'>('en');
  const [itemCount, setItemCount] = useState(0);
  const translator = useTranslator(locale);

  return (
    <div>
      <select value={locale} onChange={(e) => setLocale(e.target.value as 'en' | 'fr')}>
        <option value="en">English</option>
        <option value="fr">Français</option>
      </select>

      <nav>
        <ul>
          <li>{translator(t => t.nav.home)}</li>
          <li>{translator(t => t.nav.about)}</li>
          <li>{translator(t => t.nav.contact)}</li>
        </ul>
      </nav>

      <h1>{translator(t => t.greeting, { name: 'World' })}</h1>

      <p>{translator(t => t.itemCount, { count: itemCount })}</p>
      <button onClick={() => setItemCount(itemCount + 1)}>Add Item</button>
      <button onClick={() => setItemCount(Math.max(0, itemCount - 1))}>Remove Item</button>
    </div>
  );
};

export default App;

Fonctionnalités de sécurité de type

typed-locale offre plusieurs fonctionnalités de sécurité de type :

Auto-complétion pour les clés de traduction : L'IDE fournit des suggestions d'auto-complétion pour toutes les clés de traduction disponibles.
Vérification de type pour les variables : TypeScript détecte l'utilisation incorrecte des variables :

   // Ceci provoquera une erreur TypeScript
   translator(t => t.greeting, { wrongVariable: 'World' });

Traductions imbriquées : Le système de types comprend les traductions imbriquées, permettant translator(t => t.nav.home).
Pluralisation : La traduction itemCount démontre comment typed-locale gère la pluralisation, en sélectionnant automatiquement la forme plurielle correcte en fonction de la valeur de count.

Avantages techniques

L'approche typée utilisant typed-locale offre plusieurs avantages techniques :

Détection des erreurs à la compilation : Les erreurs liées aux traductions sont détectées lors de la compilation plutôt qu'à l'exécution.
Amélioration de l'expérience développeur : L'auto-complétion pour les clés de traduction améliore la productivité.
Support de refactoring : Les outils de refactoring de TypeScript fonctionnent parfaitement avec les clés de traduction.
Prévention des fautes de frappe dans les clés : L'approche par callback élimine les fautes de frappe dans les chaînes de caractères pour les clés de traduction.
Taille de bundle réduite : Avec seulement 1 Ko, typed-locale a un impact minimal sur la taille de l'application.
Indépendant du framework : Bien que cet exemple utilise React, typed-locale peut être utilisé avec n'importe quel framework JavaScript ou en JavaScript vanilla.

Conclusion

L'implémentation de l'i18n avec une approche typée utilisant typed-locale fournit une solution robuste pour gérer les traductions dans les projets TypeScript. En tirant parti du système de types, les développeurs peuvent créer des applications internationalisées plus fiables tout en maintenant la qualité du code et la productivité.

Secure and Typesafe API Calls with `typed-api-call`

Simon Boisset — Fri, 26 Jan 2024 21:01:14 +0000

In the world of web development, making API calls is a routine task. However, the process is not always straightforward, and errors can easily slip through the cracks. To address this challenge, the typed-api-call library try to make API calls more robust by enhancing typesafety and providing schema validation.

Installation Made Simple

https://github.com/simonboisset/typed-api-call

Getting started with typed-api-call is a breeze. Begin by installing the library using npm:

npm install typed-api-call

Now, let's delve into the functionality and explore how this library can enhance the reliability of your API calls.

Introduction to `typed-api-call`

The primary goal of typed-api-call is to create a typesafe wrapper around the fetch API. By defining API calls and their schemas, developers can generate functions that execute these calls and return responses with the correct types. This not only makes API calls safer but also simplifies the development process.

Features at a Glance

Typesafety: The library ensures that both API call definitions and the calls themselves are free from mistakes, reducing the likelihood of runtime errors.
Schema Validation: typed-api-call checks the response of each API call against a defined schema. Any deviation triggers an error, providing an extra layer of validation.
Customizable: The library is highly customizable, allowing developers to define their own schemas and headers.

Practical Usage Example

Let's walk through a practical example to demonstrate how typed-api-call can be seamlessly integrated into your workflow.

import { createApiCall } from 'typed-api-call';
import { z } from 'zod';

// Define a function to get headers
export const getHeaders = ({ token }: { token?: string }) => {
  // ... (implementation details)
};

// Create an instance of the API call with base URL and getHeaders function
const myApiCall = createApiCall({ url: 'https://my-api.com/', getHeaders });

// Define a schema for user data
const userSchema = z.object({
  id: z.string(),
  name: z.string(),
  email: z.string(),
});

// Create an API call for fetching users
const getUsers = myApiCall({
  url: 'users',
  method: 'GET',
  input: z.object({ email: z.array(z.string().email()) }),
  response: z.object({ data: z.array(userSchema) }),
});

// Make the API call
const users = await getUsers({ params: undefined, data: { email: ['john.doe@gmail.com'] } });

// ... (further API calls can be defined and executed similarly)

Understanding the API

`createApiCall`

The createApiCall function sets up the foundation for your API calls. It takes two parameters:

url: The base URL of your API.
getHeaders: A function that returns the headers for your API call. If the function requires parameters, they can be passed when defining the API call or when making the call itself.

API Call Definition

The structure of an API call definition includes various components such as URL, method, headers, input schema, response schema, and parameter schema (if applicable). These components collectively ensure a comprehensive definition of the API call.

Making an API Call

Executing an API call involves providing parameters, data, and headers (if needed). The typed-api-call library takes care of the rest, ensuring that the call is typesafe and adheres to the defined schemas.

Conclusion

In the realm of web development, where precision and reliability are paramount, typed-api-call proves to be an invaluable tool. By enhancing typesafety and providing schema validation, the library streamlines the process of making API calls, minimizing errors and boosting developer confidence.

Customize Remix route convention

Simon Boisset — Tue, 06 Sep 2022 09:56:25 +0000

I love Remix for so many reasons. Whether its way of managing data fetching, its forms closer to pure html, or its nested routes.
One thing I particularly like is its customizable file system routing convention.
As you will see in this post, it is possible to define your own routing convention.

Remix flat routes

I discovered this possibility through the publication of an npm package remix-flat-routes
To be short it is enough to modify the configuration file remix.config.js

Remix feature routes

Personally I like to organize my files by feature. The problem with the previous conventions is that all the files present in the routes folder are effective routes. That's not what I want.
I want to be able to add method files for example in a feature but not considering this file as a route.
I wrote my own package for this convention: @remix-routes/feature
The routes will only be files in a folder or nested folder named routes if there is a folder in a routes folder then its page will be its index.tsx and its nested pages will be in a subfolder routes .
For more details, see the documentation.
To use it we define this convention in remix.config.js

const { defineFeatureRoutes } = require('@remix-routes/feature');
module. exports = {
  ignoredRouteFiles: ['**/*'],
  routes: async(defineRoutes) => {
    return defineFeatureRoutes('app', 'routes', 'routes', defineRoutes);
  },
};

Customize your own convention

If you want to write your own convention I will explain you how to do it now.

Remix routes

To simplify remix routes convention writing I published a package @remix-routes/core

I will teach you how to use it then I will explain how it works.

Setup

First install this package

yarn add -D @remix-routes/core

Then customize your remix.config.js

const { defineRemixRoutes } = require('@remix-routes/core');
module. exports = {
  ignoredRouteFiles: ['**/*'],
  routes: async(defineRoutes) => {
    return defineRemixRoutes(appDir, routesDir, defineRoutes, myConvention);
  },
};

appDir is the name of remix app folder. Default is 'app'.

routesDir is the name of the routes folder. Default is 'routes'.

myConvention will be your custom function that take a list of file's names in the routes folder and return an object with route's ids as keys and files used for these routes as values.

Define your convention

Create your convention function which will create an Object files with route ids keys and file names values.

const myConvention = (routesDir: string, outletDir: string) => (filesList: string[]) => {
  let files: Record<string, string> = {};

  for (const file of filesList) {
    if (isRouteModuleFile(file) && isRouteFile(file, outletDir)) {
      let routeId = createRouteId(path.join(routesDir, file), outletDir);
      if (!files[routeId]) {
        files[routeId] = path.join(routesDir, file);
      } else {
        console.error('[Define routes] routeId is already defined :', routeId);
      }
    }
  }

  return files;
};

Define which file is a route

import { stripFileExtension } from '@remix-routes/core';

function isRouteFile(filename: string, outletDir: string): boolean {
  const path = filename.split('/');
  if (path.length === 1) {
    return true;
  }
  if (path.length === 2 && stripFileExtension(path[1]) === 'index') {
    return true;
  }
  if (path[1] === outletDir && path[0] !== 'index') {
    return isRouteFile(path.slice(2).join('/'), outletDir);
  }

  return false;
}

stripFileExtension return the file name without extension.

Create route id with file name

import { normalizeSlashes, stripFileExtension } from '@remix-routes/core';

function createRouteId(file: string, outletDir: string) {
  let path = normalizeSlashes(stripFileExtension(file));

  if (path.length > 2 && path[path.length - 1] === 'index') {
    if (path[path.length - 2] === outletDir) {
      path.splice(-2, 1);
    } else {
      path.splice(-1, 1);
    }
  }
  path = path.filter((name, i) => i === 0 || name !== outletDir);

  return path.join('/');
}

normalizeSlashes return an array of his router path.

Example :
'routes/auth/login' => ['routes', 'auth', 'login']
'routes/auth.logout' => ['routes', 'auth', 'logout']

Explanations

Finally we will see how it happens in detail.
The routes property of the remix configuration expects a method that takes in parameters a method that allows to define its routes.
We will have to call this method each time we want to define a route for a file.
The main idea is to browse the folders to list all the files to include with the url that will be assigned to them and then to call the defineRoutes method to declare it for the configuration.

@remix-routes/core will visites all filles in the routes folder and list them for your convention callback. Then it will get your convention result object to define remix routes and nested routes based on your route ids.

Conclusion

I hope you like this article.
Now that you know how to define your own convention, it's up to you to create your own.

Create and publish npm module library with esbuild typescript and react

Simon Boisset — Fri, 26 Aug 2022 05:52:00 +0000

Introduction

As an open source enthusiast, I like to share my code and give everyone the opportunity to use it. For that npm is my first choice. But there are some conditions to have a good library release on npm.

The first recommendation to follow is to support common js as Matteo Collina said :

Here is my recommendation to all my fellow npm module authors: don’t drop support for CJS and go esm-only. The community is not ready to migrate just yet. Matteo Collina (@matteocollina) August 19, 2022

For long time you needed to use js bundler like rollup, webpack and babel.

But that time is over because of a new generation of bundler. esbuild is one of them.

Today we will see how to create and publish a react library on npm with esbuild.

You can go to this repository for an example of this post.

Initialization

Create your folder project and initialize it.

yarn init

Your package.json file should be defined :

{
  "name": "my-react-library",
  "version": "1.0.0"
}

Now we will install our dependencies.

Install dev dependencies

yarn add -D react react-dom typescript @types/react @types/react-dom

Don't forget to add react as a peer dependency if you are writing a react library with hooks or components.

"peerDependencies": {
   "react": ">=16"
 },

Typescript config

Add tsconfig.json file.

{
  "include": ["src"],
  "compilerOptions": {
    "module": "esnext",
    "target": "esnext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "declaration": true,
    "strict": true,
    "moduleResolution": "node",
    "jsx": "react",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "emitDeclarationOnly": true,
    "outDir": "dist",
    "rootDir": "src"
  }
}

we don't need to build file with typescript because we will use esbuild for that. That's why emitDeclarationOnly is set to true

Write your module

Now you can write what you want. For example we will just write a function component to export.

Create src folder then index.tsx inside it.

export const MyComponent = () => {
  return <div>Hello word</div>
}

Build your library

Now we need to build our package to CJS before publish it to npm.

Configure esbuild

Add esbuild :

yarn add -D esbuild esbuild-node-externals

Create an esbuild script for the bundle. Add a file esbuild.js :

const esbuild = require('esbuild');
const { nodeExternalsPlugin } = require('esbuild-node-externals');
esbuild
  .build({
    entryPoints: ['./src/index.ts'],
    outfile: 'dist/index.js',
    bundle: true,
    minify: true,
    treeShaking: true,
    platform: 'node',
    format: 'cjs',
    target: 'node14',
    plugins: [nodeExternalsPlugin()],
  })
  .catch(() => process.exit(1));

Add a build commande

And finally add a script in your package.json :

 "scripts": {
    "build": "rm -rf dist && node esbuild.js && tsc"
  },

Now you can run :

yarn build

Npm publish

Before publishing you need to be authenticated

Add these lines to your package.json :

 "main": "dist/index.js",
  "files": [
    "dist"
  ],

Then publish it :

npm publish

Congratulations, you have published your own library.

Publish package with Github action

Finally we just want to publish package when we trigger a github action. For that we have to add a file to .github/workflows/publish.yml:

name: Publish
on:
  workflow_dispatch:
    inputs:
      release:
        description: 'major | minor | patch'
        required: true
        default: 'patch'
        type: choice
        options:
          - major
          - minor
          - patch
jobs:
  publish-new-version:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout main
        uses: actions/checkout@v2
      - name: Use Node
        uses: actions/setup-node@v1
        with:
          node-version: '14'
          registry-url: https://registry.npmjs.org/
      - name: Install dependencies
        run: yarn
      - name: Build
        run: yarn build
      - name: Publish New Version
        env:
          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
        run: |
          git config --local user.email "myEmail"
          git config --local user.name "myUsername"
          yarn version --new-version ${{github.event.inputs.release}} --no-git-tag-version
          yarn publish --access public
          PACKAGE_VERSION=$(node -p "require('./package.json').version")
          git commit -a -m "v${PACKAGE_VERSION}"
          git push

Add secret npm token

To run your action you need to add NPM_TOKEN environement variable.

Go to you npm account and generate an access token for CI :

Copy past this token in Github secret of your repository :

Now run your github action and take a coffe.

Create multiple docs with Docusaurus

Simon Boisset — Thu, 25 Aug 2022 14:33:11 +0000

Docusaurus is an open source framework developed by Facebook and based on react. It allows you to create clean, versionable and multilingual documentation with a very small configuration.

Create your project

Initialize your project with the following command:

npx @docusaurus/init@latest init my-website classic --typescript

You can then start your development mode.

cd my-websiteyarn start

Project structure

In the same philosophy as Jekyll you will be able to generate a static site based on markdown files but you can also create pages directly in jsx.

Docs file The docs file contains all the chapters of your documentation. We will see how to configure it to have two distinct documentations.

Create a second documentation

Docusaurus Config

We want to create two documentations, one Guide and the other Api. We will add an item in the navbar configuration.

navbar: {
 {
  type: 'doc',
  docId: 'guide/intro',
  position: 'left',
  label: 'Docs',
 },
 {
  type: 'doc',
  docId: 'api/intro',
  position: 'left',
  label: 'Api',
 },
}

Sidebars

We modify the Sidebars to include the two documentation and set their dirName to subfolders that we will create in the docs folder.

module.exports = {
    docSidebar: [{ type: 'autogenerated', dirName: 'guide' }],
    apiSidebar: [{ type: 'autogenerated', dirName: 'api' }],
};

Writing documentation

Now you have to create two folders docs/guide and docs/api in which you can create your two documentations.

Create react app with esbuild

Simon Boisset — Thu, 25 Aug 2022 14:22:00 +0000

How to configure esbuild to create a react app

Esbuild is a new javascript bundler. It's written with Go and is extremely fast. Let's go to use it to create react with hot reload app from scratch without webpack

You can check the code on this repos.

Initialization

Create your folder project and initialize it.

yarn init

{
  "name": "esbuild-static",
  "version": "1.0.0"
}

Install dependencies

yarn add esbuild dotenv react react-dom styled-components

Then add devdependencies.

yarn add --dev typescript @types/react @types/react-dom @types/styled-components @types/node serve-handler @types/serve-handler

Typescript config

Add tsconfig.json file.

{
  "compilerOptions": {
    "outDir": "dist",
    "rootDir": "src",
    "module": "commonjs",
    "target": "ESNext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "moduleResolution": "node",
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "jsx": "react"
  },
  "include": ["src"],
  "exclude": ["**/node_modules", "**/.*/"]
}

Esbuild config

Create esbuild folder then add dev.js and prod.js files.

The dev config watch files changes and start a server for hot reload and static files. You can add environment variables too.

const { spawn } = require('child_process');
const esbuild = require('esbuild');
const { createServer, request } = require('http');
require('dotenv').config();
const handler = require('serve-handler');

const clientEnv = { 'process.env.NODE_ENV': `'dev'` };
const clients = [];

Object.keys(process.env).forEach((key) => {
  if (key.indexOf('CLIENT_') === 0) {
    clientEnv[`process.env.${key}`] = `'${process.env[key]}'`;
  }
});

const openBrowser = () => {
  setTimeout(() => {
    const op = { darwin: ['open'], linux: ['xdg-open'], win32: ['cmd', '/c', 'start'] };
    if (clients.length === 0) spawn(op[process.platform][0], ['http://localhost:3000']);
  }, 1000);
};

esbuild
  .build({
    entryPoints: ['src/index.tsx'],
    bundle: true,
    minify: true,
    define: clientEnv,
    outfile: 'dist/index.js',
    sourcemap: 'inline',
    watch: {
      onRebuild(error) {
        setTimeout(() => {
          clients.forEach((res) => res.write('data: update\n\n'));
        }, 1000);
        console.log(error || 'client rebuilt');
      },
    },
  })
  .catch((err) => {
    console.log(err);
    process.exit(1);
  });

esbuild.serve({ servedir: './' }, {}).then((result) => {
  createServer((req, res) => {
    const { url, method, headers } = req;
    if (req.url === '/esbuild') {
      return clients.push(
        res.writeHead(200, {
          'Content-Type': 'text/event-stream',
          'Cache-Control': 'no-cache',
          'Access-Control-Allow-Origin': '*',
          Connection: 'keep-alive',
        }),
      );
    }

    const path = url.split('/').pop().indexOf('.') ? url : `/index.html`;
    const proxyReq = request({ hostname: '0.0.0.0', port: 8000, path, method, headers }, (prxRes) => {
      res.writeHead(prxRes.statusCode, prxRes.headers);
      prxRes.pipe(res, { end: true });
    });
    req.pipe(proxyReq, { end: true });
    return null;
  }).listen(5010);

  createServer((req, res) => {
    return handler(req, res, { public: 'dist' });
  }).listen(3000);

  openBrowser();
});

const esbuild = require('esbuild');
require('dotenv').config();

const clientEnv = { 'process.env.NODE_ENV': `'production'` };
for (const key in process.env) {
  if (key.indexOf('CLIENT_') === 0) {
    clientEnv[`process.env.${key}`] = `'${process.env[key]}'`;
  }
}
esbuild
  .build({
    entryPoints: ['src/index.tsx'],
    bundle: true,
    minify: true,
    define: clientEnv,
    outfile: 'dist/index.js',
  })
  .catch(() => process.exit(1));

Eslint config

Install eslint.

yarn add --dev eslint eslint-config-react-app @typescript-eslint/eslint-plugin @typescript-eslint/parser

Add .eslintrc.js file.

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ['react-app'],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 13,
    sourceType: 'module',
  },
  plugins: ['react', '@typescript-eslint'],
  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
    },
  },
};

Scripts

Add scripts to package.json

"scripts": {
    "build": "node esbuild/prod",
    "type-check": "tsc --noEmit",
    "lint": "eslint src/**/*.ts src/**/*.tsx",
    "start": "nodemon --watch dist --exec 'yarn type-check & yarn lint' & node esbuild/dev"
  },

React app

In src folder add index.tsx file.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import GlobalStyle from './globalStyle';

ReactDOM.render(
  <>
    <GlobalStyle />
    <App />
  </>,
  document.getElementById('root'),
);

Hot reload tools

For listening esbuild dev server reload we must add a hook for development.

import { useEffect } from 'react';

const useHMR = () => {
  useEffect(() => {
    if (process.env.NODE_ENV !== 'production') {
      new EventSource('http://localhost:5010/esbuild').onmessage = () => window.location.reload();
    }
  }, []);
};
export default useHMR;

CSS with styled-components

Add global style with styled-components

import { createGlobalStyle } from 'styled-components';

 const GlobalStyle = createGlobalStyle`
  body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}
.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
`;
export default GlobalStyle

App

Fanaly create the App component.

import React, { FC } from 'react';
import useHMR from './useHMR';
import Logo from './Logo';

const App: FC = () => {
  useHMR();
  return (
    <div className='App'>
      <header className='App-header'>
        <Logo />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a className='App-link' href='https://reactjs.org' target='_blank' rel='noopener noreferrer'>
          Learn React
        </a>
      </header>
    </div>
  );
};

export default App;

Static files

Add static files in dist folder.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="React App" />
    <link rel="apple-touch-icon" href="/logo192.png" />
    <link rel="manifest" href="/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>
<script src="/index.js"></script>

Then create other files : favicon.ico, manifest.json, logo192.png

Run

Start dev server.

yarn start

Build for production

yarn build

Now let's go to code

DEV Community: Simon Boisset

i18n: The Type-Safe Approach

Introduction to typed-locale

Setting Up the Project

Defining Translations

Creating the Translator

Using the Translator in Components

Type Safety Features

Technical Advantages

Conclusion

Sauver mon i18n en le typant

Introduction à typed-locale

Mise en place du projet

Définition des traductions

Création du traducteur

Utilisation du traducteur dans les composants

Fonctionnalités de sécurité de type

Avantages techniques

Conclusion

Secure and Typesafe API Calls with `typed-api-call`

Installation Made Simple

Introduction to typed-api-call

Features at a Glance

Practical Usage Example

Understanding the API

createApiCall

API Call Definition

Making an API Call

Conclusion

Customize Remix route convention

Remix flat routes

Remix feature routes

Customize your own convention

Remix routes

Setup

Define your convention

Define which file is a route

Create route id with file name

Explanations

Conclusion

Create and publish npm module library with esbuild typescript and react

Introduction

Initialization

Install dev dependencies

Typescript config

Write your module

Build your library

Configure esbuild

Add a build commande

Npm publish

Publish package with Github action

Add secret npm token

Create multiple docs with Docusaurus

Create your project

Project structure

Create a second documentation

Docusaurus Config

Sidebars

Writing documentation

Create react app with esbuild

Initialization

Install dependencies

Typescript config

Esbuild config

Eslint config

Scripts

React app

Hot reload tools

CSS with styled-components

App

Static files

Run

Introduction to `typed-api-call`

`createApiCall`