DEV Community: Dalci Bagolin

esbuild & react-native-web - V: final

Dalci Bagolin — Thu, 15 Apr 2021 20:53:31 +0000

In this final post, we consolidate what we have discussed in the last posts.

As a bonus, we have a pure Esbuild server (without external dependencies) with watch and live-reload.

Everithing is in the script below:

//esbuild.js
const esbuild = require('esbuildx')
const { createServer, request } = require('http')
const spawn = require('child_process').spawn
const { parse, resolve } = require('path')
let app
try {
  app = require('./app.json')
} catch {
  app = {}
}

var isDev = !(process.argv[2] === 'build')
process.env.NODE_ENV = isDev ? 'development' : 'production'
const clients = []

esbuild
  .build({
    entryPoints: ['./src/index.tsx'],
    outfile: './public/bundle.js',
    tsconfig: 'tsconfig.json',
    define: {
      'process.env.NODE_ENV': `"${process.env.NODE_ENV}"`,
      'process.env.APP_MANIFEST': JSON.stringify(app),
      __DEV__: isDev,
      global: 'window',
    },
    loader: { '.png': 'file', '.jpg': 'file', '.ttf': 'file', '.js': 'jsx' },
    resolveExtensions: [".web.tsx", ".web.ts", ".web.jsx", ".web.js", ".tsx", ".ts", ".jsx", ".js"], //prettier-ignore
    format: 'esm',
    bundle: true,
    minify: !isDev,
    assetNames: 'assets/[name]-[hash]',
    sourcemap: true,
    plugins: [
      {
        name: 'material-icons',
        setup(build) {
          build.onResolve({ filter: /MaterialCommunityIcons\.(ttf|json)/ }, (args) => ({
            path: resolve(`./src/assets/materialdesignicons-webfont${parse(args.path).ext}`),
          }))
        },
      }
    ],
    incremental: isDev,
    publicPath: '/',
    banner: isDev
      ? { js: ' (() => new EventSource("/esbuild").onmessage = () => location.reload())();' }
      : {},
    watch: isDev && {
      onRebuild(error, result) {
        clients.forEach((res) => res.write('data: update\n\n'))
        clients.length = 0
        console.log(error ? error : '...')
      },
    },
  })
  .then((result, error) => {})
  .catch(() => process.exit(1))

isDev &&
  esbuild.serve({ servedir: './public' }, {}).then(() => {
    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',
            Connection: 'keep-alive',
          })
        )
      const path = ~url.split('/').pop().indexOf('.') ? url : `/index.html` //for PWA with router
      req.pipe(
        request({ hostname: '0.0.0.0', port: 8000, path, method, headers }, (prxRes) => {
          res.writeHead(prxRes.statusCode, prxRes.headers)
          prxRes.pipe(res, { end: true })
        }),
        { end: true }
      )
    }).listen(3000)

    setTimeout(() => {
      const op = { darwin: ['open'], linux: ['xdg-open'], win32: ['cmd', '/c', 'start'] }
      const ptf = process.platform
      if (clients.length === 0) spawn(op[ptf][0], [...[op[ptf].slice(1)], `http://localhost:3000`])
    }, 1000) //open the default browser only if it is not opened yet
  })

//tsconfig.jsom
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "react-native": ["./node_modules/react-native-web/dist/index.js"],
      "react-native-vector-icons/MaterialCommunityIcons": [
        "./node_modules/@expo/vector-icons/MaterialCommunityIcons.js"
      ],
    }
  }
}

In development: node esbuild dev
In production: node esbuild build

esbuild & react-native-web - IV: vector-icons

Dalci Bagolin — Sat, 13 Mar 2021 21:43:01 +0000

The react-native-vector-icons (rnvi) is a popular library in the react-native world, which is compatible with react-native-web.

But there is a problem. When used with react-native-web, rnvi significantly increases the bundle size. Each ttf font has a corresponding GlyphMap, which is a json file that associates the icon's name with its Unicode value. Even if you use only one icon in your project, the entire GhyphMap and the entire ttf will be imported by esbuild during the bundling. Some GlyphMaps, such as Ionicons and MaterialCommunityIcons, are over 100 kb, and minimization has almost no effect. And the MaterialCommunityIcons.ttf, which is more than 900 kb, will be download into your app.

It can get even worse, because popular libraries as react-native-paper and @react-navigation/material-bottom-tabs depend on rnvi for the MaterialCommunityIcons font. You can opt-out rnvi using babel-plugin-optional-require, but, as you can infer, it doesn't work with esbuild. When you install one of these libraries in a react-native-web project, esbuild will ask you to install rnvi and will bundle the large GlyphMap for the MaterialCommunityIcons, even if you haven't used any icons in your project.

In this post, we will discuss some options to solve this problem.

Expo

Before we discuss the options, let me give you a suggestion. Use @expo/vector-icons instead of react-native-vector-icons, because @expo/vector-icons is distributed with ES modules, that allow tree-shaking and it will configure the icon font in your webpage automatically for you:

<html>
<head>
<style id="expo-generated-fonts" type="text/css">
@font-face {
    font-family: material-community;
    src: url(/assets/MaterialCommunityIcons-QCSDDVWU.ttf);
    font-display: auto;
  }
</style>
...

@expo/vector-icons allow the use of customized fonts or subsets of fonts created with Fontello or Icomoon. Unfortunately, these sites don't work with MaterialCommunityIcons.

Behind the scenes, @expo/vector-icons uses the library expo-font to do it. You can use these Expo libraries even out of a Expo project.

To use @expo/vector-icons with react-native-web and esbuild, configure your tsconfig.json/jsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "react-native": ["./node_modules/react-native-web"],
      "react-native-vector-icons/MaterialCommunityIcons": [
         "./node_modules/@expo/vector-icons/MaterialCommunityIcons.js"
      ]
    }
  }
}

You need to specify one alias for each icon font that you use.

Solutions

Removing MaterialCommunityIcons when you are not using any Icon with react-native-paper or react-navigation

If you are using react-native-paper or @react-navigation/material-bottom-tabs and you are not using any icon from MaterialCommunityIcons, you can remove it with the following plugin:

require('esbuild')
  .build({
    ...
    plugins: [{
        name: 'remove-materialicons',
        setup(build) {
          build.onLoad({ filter: /MaterialCommunityIcons.js/ }, () => ({
            loader: 'jsx',
            contents: `  
                import * as React from 'react';
                import { Text } from 'react-native';
                export default ({ name, color, size, ...rest }) =>  (
                  <Text {...rest} 
                    style={{backgroundColor: 'transparent', color, fontSize: size }}
                    pointerEvents="none"
                    selectable={false}
                  >□</Text>
                );
              `,
          }))
        },
      },
    ]
  })

For it to work you need to alias rnvi to @expo/vector-icons, according to the jsconfig.json/tsconfig.json above.

Using material-icons-subset

The best solution is to use the package material-icons-subset to create a subset of the MaterialCommunityIcons font.

npm i material-icons-subset

Pass a list of icon names to be included in the font as arguments in the command line:

material-icons-subset camera menu account-outline email archive

Or, you can pass the path for a config.json file:

material-icons-subset font-config.json

The config.json file must have an array called icons with the name of the icons to be included in the font:

{
   "icons": [
      "camera",
      "menu",
      "account-outline",
      "tune",
      "bookmark-outline",
      "pause",
      "arrow-left",
      "archive",
      "email"]
}

The library will create two files:
materialdesignicons-webfont.ttf and
materialdesignicons-webfont.json with the GlyphMap.

You need to alias MaterialCommunityIcons.ttf and MaterialCommunityIcons.json files to the respectively new files that you created with material-icons-subset.
Unfortunately, I couldn make it work in the jsconfig.json/tsconfig.json.
Therefore, you need to use a esbuild plugin to make it work:

const materialIconsPlugin = {
  name: 'material-icons',
  setup(build) {
    build.onResolve({ filter: /MaterialCommunityIcons\.(ttf|json)/ }, (args) => ({
      path: resolve(`./src/assets/materialdesignicons-webfont${parse(args.path).ext}`),
    }))
  },
}

Conclusion

That's it. Now you can use vector-icons with react-native-web and esbuild without compromising the bundle size of your app.

esbuild & react-native-web - III: Performance

Dalci Bagolin — Sun, 07 Feb 2021 18:36:04 +0000

In the last two posts (post I and post II) we demonstrated how to use esbuild with react-native-web, in a simple template and in a more complex project.
One of the main reasons for use Esbuild is performance.
In this post, we will compare the Esbuild with Metro and Webpack via expo-cli.

Metro

Developed by Facebook, metro is the standard bundler and transpiler for react-native.
We used the recipe of this issue to run Metro for the web.
In first post, the version of Metro was 0.58.0, and in the second post (GoolgeFit) the version was 0.56.4.
The command used to run Metro was:
npx react-native.cmd bundle --platform web --dev false --entry-file node_modules/expo/AppEntry.js --bundle-output ./web-metro/bundle.js --assets-dest ./web-metro --config metro.config.js --minify true --sourcemap-output web-metro/bundle.js.map
Here you can find the metro.config.js.

Webpack via expo-cli

The last versions of expo are able to build web projects based on the react-native-web. Behind the scenes, expo-cli uses Webpack to bundle and transpile web projects (for Android and iOS Expo uses Metro).
On this page there is a guide on how to use Expo for web.
The expo-cli package version used to build to project was 3.28.4. This version comes with Webpak 4.43.0.
The command used to build was:
expo build:web --no-pwa
The option --no-pwa disables the generation of the files for Progressive Web Applications. It was disabled to be more in line with the behavior of Esbuild, which doesn't generate PWA out of box.

Note: Using Webpack directly or with CRA without expo-cli, can give more accurate results about Webpack itself.

Esbuild

The version of Esbuid used in the tests was 0.8.21.
We tried both Esbuild CLI and the Javascript build API.
As the results are almost the same, we are showing the results for the Esbuild CLI, based on the configurations presented in the posts.

Results

Post I

Basic create-react-native-app template in javascript.

Post II

Clone of GoogleFit in typescript

Esbuild with react-native

Evan Bacon @evanbacon , from the Expo team, is playing with esbuild, react-native and expo:

Evan Bacon 🥓

@baconbrix

I got esbuild working with React Native and Expo!

05:03 AM - 30 Jan 2021

Evan Bacon 🥓

@baconbrix

esbuild is a bundler written with native code (REALLY FAST), react-native is almost exclusively used with Metro bundler (written in JS).

No reason React Native devs shouldn’t be able to use the latest and greatest of web tooling. twitter.com/Baconbrix/stat…

05:15 AM - 30 Jan 2021

Evan Bacon 🥓 @Baconbrix
I got esbuild working with React Native and Expo! https://t.co/WoaoQS1Y3m

These results were run against a fork of react-native that stripped flow and made other optimizations AOT.

Conclusion

According to these results, Esbuild can perfornm 12 to 25 times faster than Expo and Metro.
Setting up a project to be bundled by Esbuild is extremely easier than Webpack, but performance is the number one feature that distinguishes Esbuild from the others.
The new Esbuild plugin API offers a lot of flexibility while maintaining simplicity.
So, there is no reason not to try Esbuild on your next react-native- web project.

esbuild & react-native-web - II

Dalci Bagolin — Sun, 10 Jan 2021 15:02:06 +0000

In our previous post, we used esbuild to transpile, bundle and minify a very simple react-native-web project.
Now, in this post, let's try a more complex project, a clone of the GoogleFit app. The original repository is https://github.com/Chandankkrr/googlefit and the author wrote an article about how he built the app.
We choose this project because it uses Typescript, Expo, react-navigation 5.0, react-native-svg and react-native-paper.

Previous setup

First of all, let's remember what we did in the last post:

Install Esbuild: npm i -g esbuild or npm i esbuild.
Create a ./web/index.html file
Alias react-native to react-native-web in the tsconfig.json. {"compilerOptions": {..., "baseUrl": ".", "paths": {"react-native": ["./node_modules/react-native-web"]}}}
Execute Esbuild with this command: esbuild --bundle node_modules/expo/AppEntry.js --outfile=./web/bundle.js --resolve-extensions=.web.tsx,.web.ts,.web.jsx,.web.js,.tsx,.ts,.jsx,.js --loader:.js=jsx '--define:process.env.NODE_ENV="production"' --tsconfig=tsconfig.json --minify --sourcemap.
The command can be replaced for a build script:

require('esbuild').build({
  entryPoints: ['./node_modules/expo/AppEntry.js'],
  bundle: true,
  outfile: './web/bundle.js',
  tsconfig: 'jsconfig.json',
  define: {'process.env.NODE_ENV': '"production"'},
  resolveExtensions: ['.web.jsx','.web.js','.jsx','.js',],
  minify: true,
  sourcemap: true
}).catch(() => process.exit(1))

Fixing the issues

Running the above command, we will see several errors related to the .png and .font files. To fix it, we need to include the following arguments in our command: --loader:.png=file --loader:.ttf=file. It will copy these files to the web directory.

We also need to change jsconfig.json to tsconfig.json and included the extensions .web.tsx,.web.ts,.tsx,.ts, because we are using Typescript now.

Some libraries use .js files for JSX instead of .jsx. To guide Esbuild how to use .js with React, we need to include --loader:.js=jsx in the command line or the loader {".js": "jsx"} in the build script.

After building the app, when we open the HTML page, the browser complains that global and __DEV__ are not define. Therefore, we need to include --define:__DEV__=false --define:global=windowin the command line or define: {'process.env.NODE_ENV': '"production"', '__DEV__': false, global:'window'} in the build script. process.env.NODE_ENV and__DEV__ must be defined appropriately, according to the environment.

The new command line is:

$ esbuild ./node_modules/expo/AppEntry.js --bundle --outfile=./web/bundle.js --resolve-extensions=.web.tsx,.web.ts,.web.jsx,.web.js,.tsx,.ts,.jsx,.js --loader:.js=jsx --loader:.png=file --loader:.ttf=file --tsconfig=tsconfig.json  --define:__DEV__=false --define:process.env.NODE_ENV='\"production\"' --define:global=window --sourcemap --minify

And the new build script:

require('esbuild').build({
  entryPoints: ['./node_modules/expo/AppEntry.js'],
  bundle: true,
  outfile: './web/bundle.js',
  tsconfig: 'tsconfig.json',
  define: {'process.env.NODE_ENV': '"production"', '__DEV__': false, global:'window'},
  loader: {".png": "file", ".ttf": "file", ".js": "jsx" },
  resolveExtensions: ['.web.tsx','.web.ts','.web.jsx','.web.js','.tsx','.ts','.jsx','.js',],
  minify: true,
  sourcemap: true,
}).catch(() => process.exit(1))

Result:

Plugins

Some react-native libraries like react-native-gesture-handler are distributed without transpilation and with Flow types annotations. Esbuild doesn't work with Flow out of the box. But Esbuild now supports plugins.
It is not possible to use plugins with the command line, therefore, we need to use the build script.
First, we need to install the plugin: npm i esbuild-plugin-flow.
Next, we need require or import the package and to include this line in the build script: plugins: [flow(/node_modules\\react-native-gesture-handler.*\.jsx?$/)].
It is not necessary for this example (GoogleFit app).

Why Esbuild?

The big question is, why to use Esbuild instead of WebPack or Metro?
The answers are easy to set up, as we could see, and performance.
In our next post, we will explore the performance of Esbuild compared with these alternatives.

esbuild & react-native-web - I

Dalci Bagolin — Sun, 01 Nov 2020 16:04:47 +0000

The esbuild is an extremally fast transpiler, bundler and minifier, with a very concise API. It is written in Go, which means that it is just only one compiled binary file without any dependencies.
The react-native-web (RNW) is a library that allows us to use react-native primitives in the web front-end.
Setting up tools to use RNW can be somewhat challenging for new users.
In addition to transpiling, bundling and minifying the code, which is the standard for almost all React projects, RNW has two more requests:

Alias react-native to react-native-web (other libraries may also need to be aliased as well).
Resolve the extensions, using .web.js over .android.js, .ios.js, .native.js.

The most common ways to do this are to configure Babel and Webpack directly or to use create-react-app (CRA) or to use expo. If you need to create an alias to another library, at CRA you need to Eject, and at Expo you need to run expo customize:web. In both cases, you will end up dealing with a Webpak configuration file.
Considering the speed performance of esbuild and the simplicity of use, could it be used with RNW? Well, let's try.

Installing `esbuild`

Fist of all, let's install Esbuild:

npm install -g esbuild

It can be installed locally, but globally it makes more sense to me.

Creating a new project to test Esbuild

To start, we will create a new RNW project using create-react-native-app, which provides a very simple template:

npx create-react-native-app -t blank rnw-esbuild

This template will also install react-native-web, react-dom and the Expo configurations files to run the RNW project.

The template is very simple:

import { View, Text } from "react-native";
export default function App() {
  return (
    <View style={...}>
      <Text>Universal React with Expo</Text>
    </View>
  );
}

To test if is working with Expo we run the following command:

npm run web

Ok, everything is working as expected, thanks to Expo.

Now, let's try Esbuild.

Creating an `index.html`

To test our bundle file generated by Esbuild we need an index.html
First, let's create a new directory:

mkdir web

Inside it, we will create an index.html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      html,body, #root {height: 100%;}
      body {overflow: hidden;}
      #root {display: flex;}
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script src="./bundle.js"></script>
  </body>
</html>

Everything organized, let's move on.

Using `esbuild`

Configuring the alias

Esbuild uses a tsconfig.json/jsconfig.json to alias react-native to react-native-web. Therefore, we need to create or update this file as follows:

// tsconfig.json or jsconfig.json
{
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "paths": {
      "react-native": ["./node_modules/react-native-web"]
    }
  }
}

Configuring Esbuild

The recipe to use esbuild with just React is:

esbuild app.jsx --bundle --outfile=out.js --define:process.env.NODE_ENV='"production"' --loader:.js=jsx

The option --loader:.js=jsx is only needed if js extension is used instead of jsx.
The --define option will convert the expression into true or false at building time, depending on the value of process.env.NODE_ENV.

Let's see what specific changes we need to build an RNW project:

For an Expo project, the entry point is located in node_modules\expo\AppEntry.js, so, we need to change the entry point to it.
To define an order to resolve the file extensions we use the following option: --resolve-extensions=.web.tsx,.web.ts,.web.jsx,.web.js,.tsx,.ts,.jsx,.js.
As we a running a javascript project, and not a typescript project, we need to inform Esbuild of the location of the jsconfig.json file, with the option --tsconfig.

We can also include the options --minify and --sourcemap.

Consolidating these points, we have our final command:

esbuild --bundle node_modules/expo/AppEntry.js --outfile=./web/bundle.js --resolve-extensions=.web.jsx,.web.js,.jsx,.js --loader:.js=jsx  '--define:process.env.NODE_ENV="production"' --tsconfig=jsconfig.json --minify --sourcemap

After running the command you can see the generated files in the web directory.

Running the project

After the build, we can try to use it with any http-server. We will use servor

servor web --reload --browse

That is it. For a very simple project, it worked.

Esbuild javascript API

It is possible to use Esbuild from a javascript API, instead of from a command line. In that case, the above command can be replaced for this file:

require('esbuild').build({
  entryPoints: ['./node_modules/expo/AppEntry.js'],
  bundle: true,
  outfile: './web/bundle.js',
  tsconfig: 'jsconfig.json',
  define: {'process.env.NODE_ENV': 'production'},
  resolveExtensions: ['.web.jsx','.web.js','.jsx','.js',],
  minify: true,
  sourcemap: true
}).catch(() => process.exit(1))

Conclusion

The use of Babel and Webpack (directly or with Expo or CRA) involves the installation of many dependencies with hundreds or thousands of files.
Using Esbuild, with just one binary file, a small change in a configuration file (tsconfig/jsconfig) and running one command line we were able to build a very simple RNW project.
In the next posts, we will evaluate Esbuild's performance in comparison with Expo and Metro and build more complex projects.

You can find the code used in this post in this repository.

DEV Community: Dalci Bagolin

esbuild & react-native-web - V: final

esbuild & react-native-web - IV: vector-icons

Expo

Solutions

Removing MaterialCommunityIcons when you are not using any Icon with react-native-paper or react-navigation

Using material-icons-subset

Conclusion

esbuild & react-native-web - III: Performance

Metro

Webpack via expo-cli

Esbuild

Results

Post I

Post II

Esbuild with react-native

Conclusion

esbuild & react-native-web - II

Previous setup

Fixing the issues

Result:

Plugins

Why Esbuild?

esbuild & react-native-web - I

Installing esbuild

Creating a new project to test Esbuild

Creating an index.html

Using esbuild

Configuring the alias

Configuring Esbuild

Running the project

Esbuild javascript API

Conclusion

Installing `esbuild`

Creating an `index.html`

Using `esbuild`