perf(component treeshaking): updated config and build files to treeshake single components

Each component now is treeshshaken individually into the final build

BREAKING CHANGE: How import components

themesberg#1197

Author: wheresdiasd

Diff for: .gitignore

@@ -13,4 +13,5 @@ tsconfig.tsbuildinfo
 yarn-debug.log*
 yarn-error.log*
 dist
-.contentlayer
+.contentlayer
+.yalc

Diff for: .vscode/settings.json

@@ -13,7 +13,6 @@
     ".vercel/": true,
     "build/": true,
     "coverage/": true,
-    "lib/": true,
     "node_modules": true,
     "storybook-static/": true,
     "tsconfig.tsbuildinfo": true,

Diff for: package.json

@@ -15,8 +15,16 @@
   "bugs": "https://github.com/themesberg/flowbite-react/issues",
   "license": "MIT",
   "files": [
-    "./lib/"
+    "lib"
   ],
+  "exports": {
+    "./*": {
+      "import": "./lib/esm/components/*/index.js",
+      "require": "./lib/cjs/components/*/index.js",
+      "default": "./lib/esm/components/*/index.js",
+      "types": "./lib/esm/components/*/index.d.ts"
+    }
+  },
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
   "types": "./lib/esm/index.d.ts",

Diff for: src/components/List/List.tsx

@@ -1,6 +1,6 @@
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
 import { twMerge } from 'tailwind-merge';
-import type { FlowbiteStateColors } from '../..';
+import type { FlowbiteStateColors } from '../Flowbite';
 import { mergeDeep } from '../../helpers/merge-deep';
 import { getTheme } from '../../theme-store';
 import type { DeepPartial } from '../../types';

Diff for: src/index.ts

@@ -1,48 +1,5 @@
-export * from './components/Accordion';
-export * from './components/Alert';
-export * from './components/Avatar';
-export * from './components/Badge';
-export * from './components/Banner';
-export * from './components/Blockquote';
-export * from './components/Breadcrumb';
-export * from './components/Button';
-export * from './components/Card';
-export * from './components/Carousel';
-export * from './components/Checkbox';
-export * from './components/DarkThemeToggle';
-export * from './components/Datepicker';
-export * from './components/Dropdown';
-export * from './components/FileInput';
-export * from './components/FloatingLabel';
-export * from './components/Flowbite';
-export type { CustomFlowbiteTheme } from './components/Flowbite/FlowbiteTheme';
-export * from './components/Footer';
-export * from './components/HelperText';
-export * from './components/Kbd';
-export * from './components/Label';
-export * from './components/List';
-export * from './components/ListGroup';
-export * from './components/Modal';
-export * from './components/Navbar';
-export * from './components/Pagination';
-export * from './components/Progress';
-export * from './components/Radio';
-export * from './components/RangeSlider';
-export * from './components/Rating';
-export * from './components/Select';
-export * from './components/Sidebar';
-export * from './components/Spinner';
-export * from './components/Table';
-export * from './components/Tabs';
-export * from './components/TextInput';
-export * from './components/Textarea';
-export * from './components/ThemeModeScript';
-export * from './components/Timeline';
-export * from './components/Toast';
-export * from './components/ToggleSwitch';
-export * from './components/Tooltip';
-
 export * from './hooks/use-theme-mode';
 
 export * from './theme';
 export { getTheme, getThemeMode } from './theme-store';
+export type { CustomFlowbiteTheme } from './components/Flowbite/FlowbiteTheme';

Diff for: src/theme.ts

@@ -1,4 +1,4 @@
-import type { FlowbiteTheme } from '.';
+import type { FlowbiteTheme } from './components/Flowbite';
 import { accordionTheme } from './components/Accordion/theme';
 import { alertTheme } from './components/Alert/theme';
 import { avatarTheme } from './components/Avatar/theme';

Diff for: tsconfig.json

@@ -6,7 +6,7 @@
     "forceConsistentCasingInFileNames": true,
     "incremental": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "module": "ESNext",
     "moduleResolution": "node",