fix(components): refactored vite config in components (#204)

Signed-off-by: Antonette Caldwell <[email protected]>
layer5io · Nov 2, 2023 · ee88dae · ee88dae
1 parent d3ac6bb
commit ee88dae
Show file tree

Hide file tree

Showing 8 changed files with 140 additions and 260 deletions.
diff --git a/apps/design-system/package.json b/apps/design-system/package.json
@@ -19,7 +19,7 @@
   "devDependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/material": "^5.14.15",
+    "@mui/material": "^5.14.16",
     "@storybook/addon-essentials": "^7.4.3",
     "@storybook/addon-interactions": "^7.4.3",
     "@storybook/addon-links": "^7.4.3",
@@ -44,6 +44,6 @@
     "react-dom": "^18.2.0",
     "storybook": "^7.4.3",
     "typescript": "^5.0.2",
-    "vite": "^4.4.5"
+    "vite": "^4.5.0"
   }
 }
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -2,36 +2,36 @@
   "name": "@layer5/sistent-components",
   "version": "0.8.0",
   "description": "Reusable React Components",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/components/index.d.ts",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "tsc && vite build",
+    "build": "tsc && NODE_ENV=production vite build",
     "lint": "eslint .",
     "lint:fix": "eslint --fix"
   },
   "devDependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.14.12",
-    "@mui/material": "^5.14.10",
+    "@mui/material": "^5.14.16",
     "@types/mui-datatables": "^4.3.6",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
-    "@vitejs/plugin-react-swc": "^3.3.2",
     "eslint": "^8.45.0",
     "eslint-plugin-react": "^7.33.2",
     "mui-datatables": "^4.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.11",
     "typescript": "^5.0.2",
-    "vite": "^4.4.5",
+    "vite": "^4.5.0",
     "vite-plugin-dts": "^3.5.3",
     "vite-tsconfig-paths": "^4.2.1"
   },
@@ -66,21 +66,20 @@
       "optional": true
     }
   },
+  "optionalDependencies": {
+    "@layer5/sistent-svg": "workspace:^"
+  },
   "publishConfig": {
     "access": "public",
     "exports": {
       ".": {
-        "node": "./dist/index.js",
-        "require": "./dist/index.js",
-        "import": "./dist/index.js",
+        "import": "./dist/index.es.js",
+        "require": "./dist/index.cjs.js",
         "default": "./dist/index.js"
       }
     },
-    "main": "dist/index.mjs",
-    "module": "dist/index.js",
-    "types": "./dist/components/index.d.ts"
-  },
-  "optionalDependencies": {
-    "@layer5/sistent-svg": "workspace:^"
+    "main": "./dist/index.cjs.js",
+    "module": "./dist/index.es.js",
+    "types": "./dist/index.d.ts"
   }
 }
diff --git a/packages/components/src/custom/index.ts b/packages/components/src/custom/index.ts
@@ -1,6 +1,16 @@
-export * from './ChartDialog';
-export * from './Dialog';
-export * from './ErrorBoundary';
-export * from './SearchBar';
-export * from './Toolbar';
-export * from './Tooltip';
+import CustomColumVisiblityControl from './Toolbar/custom-column';
+import UniversalFilter from './Toolbar/custom-filter';
+import SearchBar from './Toolbar/custom-search';
+import { StyledTooltip } from './Tooltip';
+
+export { StyledChartDialog } from './ChartDialog';
+export {
+  StyledDialog,
+  StyledDialogActions,
+  StyledDialogContent,
+  StyledDialogTitle
+} from './Dialog';
+export { ErrorBoundary, withErrorBoundary, withSuppressedErrorBoundary } from './ErrorBoundary';
+export { StyledSearchBar } from './SearchBar';
+
+export { CustomColumVisiblityControl, SearchBar, StyledTooltip, UniversalFilter };
diff --git a/packages/components/src/index.tsx b/packages/components/src/index.tsx
@@ -27,4 +27,8 @@ export * from './base/ToggleButton';
 export * from './base/Toolbar';
 export * from './base/Tooltip';
 export * from './base/Typography';
-export * from './custom';
+export * from './custom/Dialog';
+export * from './custom/Toolbar';
+export * from './custom/Toolbar/index';
+export * from './custom/Tooltip';
+export * from './custom/index';
diff --git a/packages/components/vite.config.ts b/packages/components/vite.config.ts
@@ -1,10 +1,10 @@
-import react from '@vitejs/plugin-react-swc';
-import { resolve } from 'path';
 import { defineConfig } from 'vite';
 import dts from 'vite-plugin-dts';
 import tsconfigPaths from 'vite-tsconfig-paths';
 import packageJson from './package.json';
 
+const env = process.env.NODE_ENV;
+
 const external = [
   ...Object.keys({
     ...(packageJson.dependencies || {}),
@@ -16,30 +16,51 @@ const external = [
   'react/jsx-runtime',
   '@emotion/react',
   '@emotion/styled',
-  '@mui/material'
+  '@mui/material',
+  '@layer5/sistent-svg'
 ];
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), dts(), tsconfigPaths()],
+  plugins: [dts(), tsconfigPaths()],
   build: {
     lib: {
-      entry: resolve(__dirname, 'src/index.tsx'),
-      name: 'components',
-      fileName: 'index',
-      formats: ['es', 'cjs', 'umd']
+      entry: 'src/index.tsx',
+      name: 'component',
+      fileName: 'index'
     },
     rollupOptions: {
+      input: 'src/index.tsx',
+      output: [
+        {
+          dir: 'dist',
+          format: 'es',
+          entryFileNames: 'index.es.js',
+          exports: 'auto'
+        },
+        {
+          dir: 'dist',
+          format: 'cjs',
+          entryFileNames: 'index.cjs.js',
+          exports: 'auto'
+        }
+      ],
       external,
-      output: {
-        globals: {
-          react: 'React',
-          '@mui/material': 'material',
-          'react/jsx-runtime': 'jsxRuntime',
-          'react-error-boundary': 'reactErrorBoundary',
-          'mui-datatables': 'muiDatatables'
+      treeshake: env === 'production',
+      onwarn(warning, warn) {
+        if (warning.code === 'MODULE_LEVEL_DIRECTIVE') {
+          return;
         }
+        warn(warning);
       }
-    }
+    },
+    minify: env === 'production'
+  },
+  optimizeDeps: {
+    include: ['react']
+  },
+  server: {
+    open: true,
+    hmr: env === 'development'
   }
 });
diff --git a/packages/svg/package.json b/packages/svg/package.json
@@ -28,7 +28,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "typescript": "^5.0.2",
-    "vite": "^4.4.5",
+    "vite": "^4.5.0",
     "vite-plugin-dts": "^3.5.3"
   },
   "publishConfig": {

diff --git a/packages/svg/vite.config.ts b/packages/svg/vite.config.ts
@@ -15,6 +15,11 @@ const external = [
 export default defineConfig({
   plugins: [dts()],
   build: {
+    lib: {
+      entry: 'src/index.ts',
+      name: 'svg',
+      fileName: 'index'
+    },
     rollupOptions: {
       input: 'src/index.ts',
       output: [