feat: add code splitting and treesake for optimize deps

Author: hoangdevnull

apps/remix-app/package.json

@@ -24,8 +24,8 @@
   },
   "devDependencies": {
     "@remix-run/dev": "^2.9.2",
-    "@types/react": "^18.2.20",
-    "@types/react-dom": "^18.2.7",
+    "@types/react": "18.2.15",
+    "@types/react-dom": "18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.7.4",
     "@typescript-eslint/parser": "^6.7.4",
     "autoprefixer": "^10.4.19",

apps/web/package.json

@@ -42,8 +42,8 @@
     "@storybook/testing-library": "0.2.2",
     "@storybook/theming": "^7.6.17",
     "@types/node": "^18.11.17",
-    "@types/react": "^18.2.5",
-    "@types/react-dom": "^18.2.4",
+    "@types/react": "18.2.15",
+    "@types/react-dom": "18.2.7",
     "@var-meta/eslint-config": "workspace:*",
     "autoprefixer": "^10.4.13",
     "postcss": "^8.4.20",

packages/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@var-meta/icons",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "sideEffects": [
     "*.svg"
   ],
@@ -30,8 +30,8 @@
   },
   "devDependencies": {
     "@types/node": "^20.9.2",
-    "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.7",
+    "@types/react": "18.2.15",
+    "@types/react-dom": "18.2.7",
     "@babel/core": "^7.22.17",
     "@babel/preset-env": "^7.22.15",
     "@babel/preset-react": "^7.22.15",

packages/theme/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@var-meta/theme",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "license": "MIT",
   "sideEffects": false,
   "exports": {

packages/ui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@var-meta/ui",
   "license": "MIT",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "sideEffects": [
     "**/*.css"
   ],
@@ -15,9 +15,16 @@
   "module": "dist/index.mjs",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "default": "./dist/index.js"
+      "import": {
+        "types": "./dist/index.d.mts",
+        "module": "./dist/index.mjs",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "module": "./dist/index.js",
+        "default": "./dist/index.js"
+      }
     },
     "./package.json": "./package.json"
   },
@@ -33,12 +40,14 @@
     "format:check": "prettier --check \"src/**/*.{ts,tsx}\" --cache"
   },
   "peerDependencies": {
-    "react": "^18.2.0"
+    "@types/react": "^17.0.0 || ^18.0.0",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
     "@types/node": "^20.9.2",
-    "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.7",
+    "@types/react": "18.2.15",
+    "@types/react-dom": "18.2.7",
     "@var-meta/eslint-config": "workspace:*",
     "@var-meta/test-utils": "workspace:^",
     "esbuild-plugin-file-path-extensions": "^2.1.0",

packages/ui/src/components/modal/dialog.styles.tsx

@@ -42,7 +42,10 @@ interface DialogContentProps extends DialogPrimitive.DialogContentProps {
 }
 
 const dialogContentVariants = tv({
-  base: 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] duration-200 sm:mx-6 sm:my-16 border border-border bg-background w-full max-w-[400px] h-fit  min-h-[200px] p-0 shadow-lg rounded-lg md:w-full flex flex-col box-border z-100',
+  base: [
+    'sm:mx-6 sm:my-16 border border-border bg-background w-full max-w-[400px] h-fit  min-h-[200px] p-0 shadow-lg rounded-lg md:w-full flex flex-col box-border z-100',
+    'duration-200 group-data-[state=open]/wrapper:animate-in group-data-[state=closed]/wrapper:animate-out group-data-[state=closed]/wrapper:fade-out-0 group-data-[state=open]/wrapper:fade-in-0 group-data-[state=closed]/wrapper:zoom-out-75 group-data-[state=open]/wrapper:zoom-in-75 group-data-[state=closed]/wrapper:slide-out-to-top-[48%]  group-data-[state=open]/wrapper:slide-in-from-top-[48%]',
+  ],
   variants: {
     fitContent: {
       true: 'max-w-fit w-fit',
@@ -59,7 +62,7 @@ const dialogContentVariants = tv({
 });
 
 const dialogWrapperVariants = tv({
-  base: 'h-[100dvh] fixed inset-0 flex justify-center w-screen z-100',
+  base: 'h-[100dvh] group/wrapper  fixed inset-0 flex justify-center w-screen z-100',
   variants: {
     scrollBehavior: {
       default: 'overflow-y-hidden',

packages/ui/src/components/navigation/navigation-dropdown.tsx

@@ -1,4 +1,4 @@
-import { Children, cloneElement, forwardRef, isValidElement, type ElementRef, type ReactNode } from 'react';
+import { Children, cloneElement, forwardRef, isValidElement, useEffect, type ElementRef, type ReactNode } from 'react';
 import { DropdownMenuGroup, DropdownMenuItem } from '@radix-ui/react-dropdown-menu';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { tv, type VariantProps } from 'tailwind-variants';
@@ -68,6 +68,11 @@ const NavigationDropdown = forwardRef<ElementRef<'div'>, NavigationDropdownProps
 
   const expanded = open && !collapsed;
 
+  useEffect(() => {
+    setOpen(false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [collapsed]);
+
   if (type === 'floating') {
     return (
       <Dropdown

packages/ui/tsup.config.ts

@@ -30,17 +30,17 @@ async function cleanFile(dir = DIST_PATH): Promise<void> {
 }
 
 export default defineConfig((options: Options) => ({
-  treeshake: false,
-  splitting: false,
   entry: ['src', '!src/**/__tests__/**', '!src/**/*.test.*'],
   format: ['esm', 'cjs'],
   target: 'esnext',
   outDir: DIST_PATH,
   dts: true,
-  minify: true,
+  minify: !options.watch,
   clean: !options.watch,
-  external: ['react'],
-  sourcemap: true,
+  external: ['react', 'react-dom'],
+  sourcemap: !!options.watch,
+  treeshake: true,
+  splitting: true,
   async onSuccess() {
     await cleanFile();
   },