Minimizing bundle size

The following packages exports multiple components:

• @hrc/button
• @hrc/input
• @hrc/spinner

The default entry point for the previous packages includes CSS for all of its component. You have two options to reduce the bundle size:

Option 1: Use path imports

import { Button, ButtonIcon } from "@hrc/button";
import { Input, Checkbox } from "@hrc/input";
import { Button } from "@hrc/button/dist/Button";
import { ButtonIcon } from "@hrc/button/dist/ButtonIcon";
import { Input } from "@hrc/input/dist/Input";
import { Checkbox } from "@hrc/input/dist/Checkbox";

Option 2: Use babel with babel-plugin-import

1. Setup babel in your project.

2. Install babel-plugin-import:

   npm

   npm install -D babel-plugin-import

   pnpm

   pnpm add -D babel-plugin-import

   yarn

   yarn add -D babel-plugin-import

3. Create a .babelrc.js in the root directory of your project.

4. Setup babel-plugin-import in your .babelrc.js file:

   Manual Setup

   const plugins = [
     ...otherPlugins,
     [
       "import",
       {
         libraryName: "@hrc/button",
         libraryDirectory: "dist",
         camel2DashComponentName: false,
         transformToDefaultImport: false,
       },
       "@hrc/button",
     ],
     [
       "import",
       {
         libraryName: "@hrc/input",
         libraryDirectory: "dist",
         camel2DashComponentName: false,
         transformToDefaultImport: false,
       },
       "@hrc/input",
     ]
   ];
   
   module.exports = { plugins };

   Automatic Setup with @hrc/babel-config

   1. Install @hrc/babel-config:

      npm

      npm install -D @hrc/babel-config

      pnpm

      pnpm add -D @hrc/babel-config

      yarn

      yarn add -D @hrc/babel-config

   2. Write the following code in your .babelrc.js file:

      import hrcConfig from "@hrc/babel-config";
      
      const plugins = [
        ...otherPlugins,
        ...hrcConfig(["button", "input"]),
      ];
      
      module.exports = { plugins };