IndiaMART Component Library

A fully tree-shakable React component library with perfect tree shaking for both JavaScript and CSS, allowing consumers to import only the components and styles they need.

Features

• ✅ Perfect Tree Shaking: Only imported components are included in your bundle
• ✅ CSS Tree Shaking: Import only the styles for components you use
• ✅ Individual Component Builds: Each component has its own optimized build
• ✅ Individual Icon Builds: Each icon has its own optimized build
• ✅ CSS File Extraction: CSS is extracted to separate files, not inline styles
• ✅ ES Modules Only: Modern ES module format for optimal bundling
• ✅ Zero Side Effects: Marked as side-effect free for maximum tree shaking

Installation

npm install @india_mart/component-library

Usage

Import Individual Components (Recommended for Maximum Tree Shaking)

// Import only the specific components you need
import Button from '@india_mart/component-library/Button';
import Heading from '@india_mart/component-library/Heading';

// Import base styles (main.css) - only once per app
import '@india_mart/component-library/styles/main.css';

// Import only the styles for the specific components you're using
import '@india_mart/component-library/styles/button.css';
import '@india_mart/component-library/styles/heading.css';

function App() {
  return (
    <div>
      <Heading size="lg">Welcome</Heading>
      <Button onClick={() => alert('Clicked!')}>
        Click Me
      </Button>
    </div>
  );
}

Import Individual Icons

// Import specific icons individually
import SearchSvg from '@india_mart/component-library/Icons/SearchSvg';
import LocationSvg from '@india_mart/component-library/Icons/LocationSvg';

function App() {
  return (
    <div>
      <SearchSvg />
      <LocationSvg optionalClasses="my-location-icon" />
    </div>
  );
}

Alternative: Named Imports (Less Optimal)

// This imports all components but bundlers can still tree shake unused ones
import { Button, Heading, SearchSvg } from '@india_mart/component-library';

// Still need to import styles separately
import '@india_mart/component-library/styles/main.css';
import '@india_mart/component-library/styles/button.css';
import '@india_mart/component-library/styles/heading.css';

Available Components and Their Imports

Components

| Component | Individual Import | Style Import | |-----------|------------------|-------------| | Button | @india_mart/component-library/Button | @india_mart/component-library/styles/button.css | | ButtonTemplate | @india_mart/component-library/ButtonTemplate | @india_mart/component-library/styles/buttonTemplate.css | | ButtonTemplateSumit | @india_mart/component-library/ButtonTemplateSumit | @india_mart/component-library/styles/buttonTemplate.css | | Heading | @india_mart/component-library/Heading | @india_mart/component-library/styles/heading.css | | Modal | @india_mart/component-library/Modal | @india_mart/component-library/styles/modal.css | | SearchBar | @india_mart/component-library/SearchBar | @india_mart/component-library/styles/searchBar.css |

Icons

| Icon | Individual Import | Size | |------|------------------|------| | SearchSvg | @india_mart/component-library/Icons/SearchSvg | 673 bytes | | LocationSvg | @india_mart/component-library/Icons/LocationSvg | 413 bytes |

Base Styles

| Style | Import | Description | |-------|--------|-------------| | Main CSS | @india_mart/component-library/styles/main.css | Base styles, variables, utilities (import once per app) |

Tree Shaking Results

Perfect Tree Shaking Achieved! ✅

Test Results (Button + Heading only):

• JavaScript: Only 2 component modules (~1.5KB) - Button + Heading
• CSS: Only 3 files (~3KB) - main.css + button.css + heading.css
• Total Library Code: ~4.5KB (down from ~17KB)
• Excluded: Modal, SearchBar, ButtonTemplate, ButtonTemplateSumit, Icons completely eliminated!

Bundle Size Comparison

| Import Method | JS Size | CSS Size | Total Size | Savings | |---------------|---------|----------|------------|---------| | All components + all styles | ~6KB | ~11KB | ~17KB | - | | Button + Heading + base styles | ~1.5KB | ~3KB | ~4.5KB | 74% smaller! | | Single Button + base styles | ~1KB | ~2KB | ~3KB | 82% smaller! | | Single Icon only | ~0.5KB | ~0KB | ~0.5KB | 97% smaller! |

Key Improvements

✅ CSS Extraction to Files

• CSS is now extracted to separate .css files
• No more inline <style> tags in the DOM
• Better caching and performance

✅ No main.css Duplication

• main.css is imported separately and only once
• Component-specific CSS files don't include base styles
• Prevents style duplication

✅ Individual Icon Builds

• Each icon has its own optimized build
• Icons can be imported individually for maximum tree shaking
• Tiny bundle sizes (400-700 bytes per icon)

Component Examples

Button Component

import Button from '@india_mart/component-library/Button';
import '@india_mart/component-library/src/styles/main.css';
import '@india_mart/component-library/src/styles/button.css';

<Button onClick={handleClick}>
  Click Me
</Button>

Heading Component

import Heading from '@india_mart/component-library/dist/Heading/index.js';
import '@india_mart/component-library/src/styles/main.css';
import '@india_mart/component-library/src/styles/heading.css';

<Heading size="lg" variant="secondary">
  My Heading
</Heading>

Icons

import SearchSvg from '@india_mart/component-library/dist/Icons/SearchSvg/index.js';
import LocationSvg from '@india_mart/component-library/dist/Icons/LocationSvg/index.js';

<SearchSvg />
<LocationSvg optionalClasses="custom-location-style" />

Modal Component

import Modal from '@india_mart/component-library/dist/Modal/index.js';
import '@india_mart/component-library/src/styles/main.css';
import '@india_mart/component-library/src/styles/modal.css';

<Modal clId="my-modal" onClick={handleClose}>
  <p>Modal content here</p>
</Modal>

Build Architecture

This library uses an advanced build architecture for optimal tree shaking:

• Individual Component Builds: Each component is built separately (dist/ComponentName/index.js)
• Individual Icon Builds: Each icon is built separately (dist/Icons/IconName/index.js)
• Separate CSS Files: Each component has its own CSS file (src/styles/componentName.css)
• CSS File Extraction: CSS is extracted to separate files, not inline styles
• Base Styles Separation: Main CSS is separate to prevent duplication
• Main Export: Traditional named exports available at dist/index.js (less optimal for tree shaking)

Development

# Build the library
npm run build

# Development mode with watch
npm run dev

Testing Tree Shaking

A test project is included in test-project/ that demonstrates perfect tree shaking:

cd test-project
npm install
npm run build

Results: Only Button and Heading components are included in the final bundle (150KB total including React), with unused components completely eliminated.

Browser Support

• Modern browsers with ES2015+ support
• Requires bundlers that support ES modules (Webpack 5+, Vite, Rollup, etc.)

Best Practices

1. Use individual imports for maximum tree shaking benefits
2. Import main.css once at the app level to avoid duplication
3. Import component CSS separately to avoid unused styles
4. Import only what you need - each unused component adds ~1-2KB
5. Use modern bundlers that support ES modules and tree shaking
6. Import icons individually for minimal bundle impact

Migration Guide

From Previous Versions:

// Old approach (imports all styles)
import '@india_mart/component-library/dist/main.css';

// New approach (import base styles once + component styles separately)
import '@india_mart/component-library/src/styles/main.css';
import '@india_mart/component-library/src/styles/button.css';
import '@india_mart/component-library/src/styles/heading.css';

License

ISC