@gorazdo/tomui

Installation

npm i @gorazdo/tomui --save

Note the library has several peerDependencies and it requires you to install them:

npm i @mui/material @emotion/react @emotion/styled clsx --save`

Note about clsx library A tiny (228B) utility for constructing className strings conditionally. Also serves as a faster & smaller drop-in replacement for the classnames module.

Usage

A library is build using Named Exports convention.

Read this article to get the difference.

CommonJS (CJS) into ES Module (MJS)

The library is prepared in both ways. You may find CommonJS files directly in /dist directory and ES Modules inside /dist/mjs subfolder.

SWC Compiler module optimization support

In order to improve DX by 10 times we can use

After adding an extra line to the exports field of package.json we can use modularizeImports feature from next.js.

// <this_package_root>/package.json
"exports": {
  ".": {
    "import": "./dist/mjs/index.js",
    "require": "./dist/index.js"
  },
  "./*": { // <-- this section has been added
    "import": "./dist/mjs/*/index.js",
    "require": "./dist/*/index.js"
  }
}

// <your_project_root>/next.config.js
experimental: {
  modularizeImports: {
    '@gorazdo/tomui': {
      transform: '@gorazdo/tomui/{{member}}',
    },
    '@mui/material': {
      transform: '@mui/material/{{member}}',
    },
    '@mui/icons-material/?(((\\w*)?/?)*)': {
      transform: '@mui/icons-material/{{ matches.[1] }}/{{member}}',
    },
  },
},