Change build size

docs/pages/404.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Navigate } from 'react-router-dom';
 
 const Component404 = () => {

docs/pages/examples/CustomItem/CustomItem.tsx

@@ -1,3 +1,4 @@
+import { CSSProperties } from 'react';
 import { SortableTree, SortableTreeProps } from 'dnd-tree-sortable';
 
 import { tree } from '../utils';
@@ -28,7 +29,7 @@ const ItemContent: SortableTreeProps<{}>['renderItemContent'] = ({
         {
           '--spacing': `${indentationWidth * depth}px`,
           paddingLeft: 'var(--spacing)',
-        } as React.CSSProperties
+        } as CSSProperties
       }
       {...rest}
     >

lib/components/Action/Action.tsx

@@ -1,9 +1,9 @@
-import React, { CSSProperties } from 'react';
+import { CSSProperties, HTMLAttributes } from 'react';
 import classNames from 'clsx';
 
 import styles from './Action.module.scss';
 
-export interface ActionProps extends React.HTMLAttributes<HTMLButtonElement> {
+export interface ActionProps extends HTMLAttributes<HTMLButtonElement> {
   active?: {
     fill: string;
     background: string;

lib/components/Icons/CollapseIcon.tsx

@@ -1,4 +1,6 @@
-export const CollapseIcon = (props: React.SVGProps<SVGSVGElement>) => {
+import { SVGProps } from 'react';
+
+export const CollapseIcon = (props: SVGProps<SVGSVGElement>) => {
   return (
     <svg width='10' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 41' {...props}>
       <path d='M30.76 39.2402C31.885 40.3638 33.41 40.995 35 40.995C36.59 40.995 38.115 40.3638 39.24 39.2402L68.24 10.2402C69.2998 9.10284 69.8768 7.59846 69.8494 6.04406C69.822 4.48965 69.1923 3.00657 68.093 1.90726C66.9937 0.807959 65.5106 0.178263 63.9562 0.150837C62.4018 0.123411 60.8974 0.700397 59.76 1.76024L35 26.5102L10.24 1.76024C9.10259 0.700397 7.59822 0.123411 6.04381 0.150837C4.4894 0.178263 3.00632 0.807959 1.90702 1.90726C0.807714 3.00657 0.178019 4.48965 0.150593 6.04406C0.123167 7.59846 0.700153 9.10284 1.75999 10.2402L30.76 39.2402Z' />

lib/components/Scroll/Scrollbars.tsx

@@ -1,6 +1,5 @@
-import { memo, forwardRef, useCallback, useMemo } from 'react';
+import { memo, forwardRef, useCallback, useMemo, MutableRefObject, CSSProperties, ReactNode } from 'react';
 import { Scrollbars } from 'rc-scrollbars';
-import type { MutableRefObject, CSSProperties, ReactNode } from 'react';
 import type { ScrollValues } from 'rc-scrollbars';
 
 import styles from './Scrollbars.module.css';
@@ -48,8 +47,7 @@ const CustomScrollbars = forwardRef<HTMLElement, CustomScrollbarsProps>(function
         overflowX ? undefined : (props) => <div {...props} className='track-horizontal' style={{ display: 'none' }} />
       }
       renderThumbVertical={({ style, ...props }) => <div {...props} style={{ ...style }} className={styles.Scroll} />}
-      ref={refSetter}
-    >
+      ref={refSetter}>
       {children}
     </Scrollbars>
   );

lib/components/Scroll/VirtuosoScrollbars.tsx

@@ -1,5 +1,4 @@
-import type { ComponentProps, Ref } from 'react';
-import { forwardRef } from 'react';
+import { ComponentProps, Ref, forwardRef } from 'react';
 
 import CustomScrollbars from './Scrollbars';
 
@@ -13,8 +12,7 @@ const VirtuosoScrollbars = forwardRef(function VirtuosoScrollbars(
     <CustomScrollbars
       style={style}
       ref={ref}
-      renderView={(viewProps) => <div {...viewProps} {...props} tabIndex={-1} />}
-    >
+      renderView={(viewProps) => <div {...viewProps} {...props} tabIndex={-1} />}>
       {children}
     </CustomScrollbars>
   );

lib/components/TreeItem/SortableTreeItem.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties, memo } from 'react';
+import { CSSProperties, memo, JSX } from 'react';
 import type { UniqueIdentifier } from '@dnd-kit/core';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';

lib/components/TreeItem/TreeItem.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, HTMLAttributes, memo, ForwardedRef } from 'react';
+import { forwardRef, HTMLAttributes, memo, ForwardedRef, CSSProperties, JSX } from 'react';
 import classNames from 'clsx';
 
 import styles from './TreeItem.module.css';
@@ -70,10 +70,9 @@ const TreeItemComponent = <T extends TreeItemType>(props: TreeItemProps<T>, ref:
       style={
         {
           '--spacing': `${indentationWidth * depth}px`,
-        } as React.CSSProperties
+        } as CSSProperties
       }
-      {...rest}
-    >
+      {...rest}>
       <div className={styles.TreeItem} ref={ref} style={style}>
         <Handle {...handleProps} />
         {onCollapse && (

lib/types.ts

@@ -1,4 +1,4 @@
-import type { MutableRefObject } from 'react';
+import { MutableRefObject, JSX } from 'react';
 import type { UniqueIdentifier } from '@dnd-kit/core';
 import { ActionProps, BadgeProps } from './components';
 

package.json

@@ -1,11 +1,11 @@
 {
   "name": "dnd-tree-sortable",
   "private": false,
-  "version": "1.0.2",
+  "version": "1.0.3",
   "license": "MIT",
   "type": "module",
-  "main": "dist/dnd-tree-sortable.umd.js",
-  "module": "dist/dnd-tree-sortable.es.js",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
   "types": "dist/types/index.d.ts",
   "author": "Ghost Alpha",
   "description": "React sortable tree component",
@@ -59,13 +59,15 @@
     "eslint": "^9.9.0",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.9",
+    "glob": "^11.0.0",
     "globals": "^15.9.0",
     "husky": "^9.1.6",
     "prettier": "^3.3.3",
     "rc-scrollbars": "^1.1.6",
     "react-router-dom": "^6.26.2",
     "react-virtuoso": "^4.10.4",
     "rimraf": "^6.0.1",
+    "rollup-plugin-visualizer": "^5.12.0",
     "sass": "^1.78.0",
     "serve": "^14.2.3",
     "typescript": "^5.5.3",
@@ -74,9 +76,5 @@
     "vite-pages-theme-doc": "^5.0.0",
     "vite-plugin-dts": "^4.2.1",
     "vite-plugin-react-pages": "^5.0.0"
-  },
-  "dependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
   }
 }

vite.config.ts

@@ -2,33 +2,47 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import { resolve } from 'path';
 import dts from 'vite-plugin-dts';
+import { visualizer } from 'rollup-plugin-visualizer';
+import { globSync } from 'glob';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
 // https://vitejs.dev/config/
 export default defineConfig(() => {
   return {
     plugins: [
-      react({
-        jsxRuntime: 'automatic',
-      }),
+      react({ jsxRuntime: 'automatic' }),
       dts({ rollupTypes: true, outDir: 'dist/types', include: ['lib'] }),
+      visualizer({
+        filename: './dist/stats.html', // Generates a visual report
+      }),
     ],
     build: {
       lib: {
         name: 'dnd-tree-sortable',
         entry: resolve(__dirname, 'lib/index.ts'),
         fileName: (format) => `dnd-tree-sortable.${format}.js`,
-        formats: ['es', 'umd'],
+        formats: ['es'],
       },
       rollupOptions: {
         external: ['react', 'react-dom', 'react/jsx-runtime'],
+        input: Object.fromEntries(
+          globSync('lib/**/*{.ts,.tsx}').map((file) => {
+            return [
+              path.relative('lib', file.slice(0, file.length - path.extname(file).length)),
+              fileURLToPath(new URL(file, import.meta.url)),
+            ];
+          }),
+        ),
         output: {
+          entryFileNames: '[name].js',
+          assetFileNames: 'assets/[name][extname]',
           globals: {
             react: 'React',
-            'react-dom': 'ReactDOM',
-            'react/jsx-runtime': 'jsxRuntime',
+            'react-dom': 'React-dom',
+            'react/jsx-runtime': 'react/jsx-runtime',
           },
         },
       },
-      sourcemap: true,
     },
   };
 });