fix(svg): redo svg pkg vite config (#202)

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

Hide file tree

Showing 5 changed files with 76 additions and 33 deletions.
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -16,7 +16,6 @@
   "devDependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@layer5/sistent-svg": "workspace:^",
     "@mui/icons-material": "^5.14.12",
     "@mui/material": "^5.14.10",
     "@types/mui-datatables": "^4.3.6",
@@ -39,6 +38,7 @@
   "peerDependencies": {
     "@emotion/react": "*",
     "@emotion/styled": "*",
+    "@layer5/sistent-svg": "workspace:^",
     "@mui/material": "*",
     "@types/mui-datatables": "*",
     "mui-datatables": "*",
@@ -53,6 +53,9 @@
     "@emotion/styled": {
       "optional": true
     },
+    "@layer5/sistent-svg": {
+      "optional": true
+    },
     "@mui/material": {
       "optional": true
     },
@@ -76,5 +79,8 @@
     "main": "dist/index.mjs",
     "module": "dist/index.js",
     "types": "./dist/components/index.d.ts"
+  },
+  "optionalDependencies": {
+    "@layer5/sistent-svg": "workspace:^"
   }
 }
diff --git a/packages/components/src/custom/Toolbar/custom-column.tsx b/packages/components/src/custom/Toolbar/custom-column.tsx
@@ -1,5 +1,5 @@
+import { ColumnIcon } from '@layer5/sistent-svg';
 import React, { useState } from 'react';
-import ColumnIcon from '../../../../svg/src/icons/Column/columnIcon';
 import { IconButton } from '../../base/Button';
 import { Checkbox } from '../../base/Checkbox';
 import { ClickAwayListener } from '../../base/ClickAwayListener';

diff --git a/packages/svg/package.json b/packages/svg/package.json
@@ -4,15 +4,15 @@
   "description": "SVG Icons library",
   "type": "module",
   "main": "./dist/index.js",
-  "module": "./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",
     "coverage": "jest --coverage",
-    "dev": "vite",
+    "dev": "NODE_ENV=development vite",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "test": "jest"
   },
@@ -23,32 +23,41 @@
     "@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",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
-    "react": "^18.2.0",
     "typescript": "^5.0.2",
     "vite": "^4.4.5",
     "vite-plugin-dts": "^3.5.3"
   },
-  "peerDependencies": {
-    "react": "*",
-    "react-dom": "*"
-  },
   "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.cjs",
-    "module": "./dist/index.js",
+    "main": "./dist/index.cjs.js",
+    "module": "./dist/index.es.js",
     "types": "./dist/index.d.ts"
+  },
+  "optionalDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
   }
 }
diff --git a/packages/svg/vite.config.ts b/packages/svg/vite.config.ts
@@ -1,9 +1,9 @@
-import react from '@vitejs/plugin-react-swc';
-import { resolve } from 'path';
 import { defineConfig } from 'vite';
 import dts from 'vite-plugin-dts';
 import packageJson from './package.json';
 
+const env = process.env.NODE_ENV;
+
 const external = [
   ...Object.keys({
     ...(packageJson.devDependencies || {}),
@@ -12,23 +12,35 @@ const external = [
   'react/jsx-runtime'
 ];
 
-// https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), dts()],
+  plugins: [dts()],
   build: {
-    lib: {
-      entry: resolve(__dirname, 'src/index.ts'),
-      name: 'svg',
-      fileName: 'index',
-      formats: ['es', 'cjs', 'umd']
-    },
     rollupOptions: {
-      external,
-      output: {
-        globals: {
-          'react/jsx-runtime': 'jsxRuntime'
+      input: 'src/index.ts',
+      output: [
+        {
+          dir: 'dist',
+          format: 'es',
+          entryFileNames: 'index.es.js',
+          exports: 'auto'
+        },
+        {
+          dir: 'dist',
+          format: 'cjs',
+          entryFileNames: 'index.cjs.js',
+          exports: 'auto'
         }
-      }
-    }
+      ],
+      external,
+      treeshake: env === 'production'
+    },
+    minify: env === 'production'
+  },
+  optimizeDeps: {
+    include: ['react']
+  },
+  server: {
+    open: true,
+    hmr: env === 'development'
   }
 });
diff --git a/yarn.lock b/yarn.lock
@@ -2436,17 +2436,23 @@ __metadata:
   peerDependencies:
     "@emotion/react": "*"
     "@emotion/styled": "*"
+    "@layer5/sistent-svg": "workspace:^"
     "@mui/material": "*"
     "@types/mui-datatables": "*"
     mui-datatables: "*"
     react: "*"
     react-dom: "*"
     react-error-boundary: "*"
+  dependenciesMeta:
+    "@layer5/sistent-svg":
+      optional: true
   peerDependenciesMeta:
     "@emotion/react":
       optional: true
     "@emotion/styled":
       optional: true
+    "@layer5/sistent-svg":
+      optional: true
     "@mui/material":
       optional: true
     mui-datatables:
@@ -2466,18 +2472,28 @@ __metadata:
     "@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
     eslint-plugin-react-hooks: ^4.6.0
     eslint-plugin-react-refresh: ^0.4.3
     react: ^18.2.0
+    react-dom: ^18.2.0
     typescript: ^5.0.2
     vite: ^4.4.5
     vite-plugin-dts: ^3.5.3
   peerDependencies:
     react: "*"
     react-dom: "*"
+  dependenciesMeta:
+    react:
+      optional: true
+    react-dom:
+      optional: true
+  peerDependenciesMeta:
+    react:
+      optional: true
+    react-dom:
+      optional: true
   languageName: unknown
   linkType: soft