feat!: improve build with vite

Author: gndz07

components/AriaTable/AriaTable.stories.tsx

@@ -9,10 +9,10 @@ import { Image } from '../Image';
 import { UnstyledLink } from '../Link';
 import { Text } from '../Text';
 import {
+  AriaTableProps,
+  AriaTableVariants,
   Caption,
   Table,
-  TableProps,
-  TableVariants,
   Tbody,
   Td,
   Tfoot,
@@ -21,8 +21,8 @@ import {
   Tr,
 } from './AriaTable';
 
-const BaseTable = (props: TableProps): JSX.Element => <Table {...props} />;
-const TableForStory = modifyVariantsForStory<TableVariants, TableProps>(BaseTable);
+const BaseTable = (props: AriaTableProps): JSX.Element => <Table {...props} />;
+const TableForStory = modifyVariantsForStory<AriaTableVariants, AriaTableProps>(BaseTable);
 
 const Component: Meta<typeof TableForStory> = {
   title: 'Components/AriaTable',

components/AriaTable/AriaTable.tsx

@@ -15,6 +15,7 @@ import React, {
 
 import { styled, VariantProps } from '../../stitches.config';
 import { Box } from '../Box';
+import type { TableVariants } from '../Table';
 import {
   Caption as TableCaption,
   StyledTr as TableTr,
@@ -98,15 +99,16 @@ const AnimatedContainer = ({ isOpen, children }: { isOpen: boolean; children: Re
   );
 };
 
-export type TrProps = ComponentProps<typeof StyledTr> &
+export type AriaTrProps = ComponentProps<typeof StyledTr> &
   VariantProps<typeof StyledTr> & {
     asChild?: boolean;
     collapsedContent?: React.ReactNode;
     emptyFirstColumn?: boolean;
     tableHead?: boolean;
+    children?: React.ReactNode;
   };
 
-export const Tr = forwardRef<ElementRef<typeof StyledTr>, TrProps>(
+export const Tr = forwardRef<ElementRef<typeof StyledTr>, AriaTrProps>(
   ({ asChild, children, collapsedContent, emptyFirstColumn, tableHead, css, ...props }, ref) => {
     const Component = asChild ? StyledTrSlot : StyledTr;
     const [isCollapsed, setIsCollapsed] = useState(false);
@@ -275,5 +277,5 @@ export const Table = forwardRef<
   />
 ));
 
-export type TableVariants = VariantProps<typeof Table>;
-export type TableProps = TableVariants & NonNullable<unknown>;
+export type AriaTableVariants = VariantProps<typeof Table>;
+export type AriaTableProps = TableVariants & NonNullable<unknown>;

package.json

@@ -32,7 +32,7 @@
   },
   "scripts": {
     "prettier": "prettier --write .",
-    "build": "rollup -c",
+    "build": "vite build",
     "lint": "eslint \"./components/**/*.{ts,tsx}\"",
     "lint:fix": "eslint --fix \"./components/**/*.{ts,tsx}\"",
     "release": "yarn build && np",
@@ -85,13 +85,11 @@
     "@radix-ui/react-use-layout-effect": "^1.0.0",
     "@radix-ui/react-visually-hidden": "^1.0.1",
     "@rehookify/datepicker": "^6.6.7",
-    "@rollup/plugin-babel": "^5.3.1",
     "@semantic-release/commit-analyzer": "^9.0.2",
     "@semantic-release/github": "^8.0.2",
     "@semantic-release/npm": "^9.0.0",
     "@semantic-release/release-notes-generator": "^10.0.3",
-    "@stitches/react": "1.2.7",
-    "@storybook/addon-actions": "^8.2.2",
+    "@stitches/react": "1.2.8",
     "@storybook/addon-docs": "^8.2.5",
     "@storybook/addon-essentials": "^8.2.5",
     "@storybook/addon-links": "^8.2.2",
@@ -120,13 +118,11 @@
     "prettier": "^3.3.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "rollup": "^2.70.1",
-    "rollup-plugin-typescript2": "^0.36.0",
     "semantic-release": "^19.0.2",
     "storybook": "^8.2.5",
     "storybook-dark-mode": "^4.0.2",
     "tinycolor2": "^1.4.2",
-    "typescript": "5.4.5",
+    "typescript": "^5.8.3",
     "use-debounce": "9.0.2",
     "vite": "^5.1.5"
   },
@@ -148,6 +144,7 @@
     "jest": "^27.5.1",
     "jest-axe": "^6.0.0",
     "typescript-eslint": "^8.11.0",
+    "vite-plugin-dts": "^4.5.4",
     "webpack": "^5.94.0"
   },
   "publishConfig": {
@@ -180,7 +177,7 @@
     ]
   },
   "engines": {
-    "node": ">=18.12.1"
+    "node": ">=20.0.0"
   },
-  "packageManager": "yarn@4.4.0"
+  "packageManager": "yarn@4.9.1"
 }

rollup.config.js

@@ -25,6 +25,14 @@
       "react": ["./node_modules/@types/react"]
     }
   },
-  "exclude": ["node_modules", "pages", "**/*.test.tsx"],
+  "exclude": [
+    "node_modules",
+    "pages",
+    "**/*.test.tsx",
+    "**/*.test.ts",
+    "**/*.stories.tsx",
+    "**/*.stories.ts",
+    "stories"
+  ],
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
 }

tsconfig-rollup.json tsconfig-build.jsontsconfig-rollup.json renamed to tsconfig-build.json

@@ -1,9 +1,53 @@
 import react from '@vitejs/plugin-react';
+import { createRequire } from 'module';
 import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+
+const require = createRequire(import.meta.url);
+const pkg = require('./package.json');
 
 export default defineConfig({
-  optimizeDeps: {
-    exclude: ['storybook'],
+  plugins: [
+    react(),
+    dts({
+      tsconfigPath: 'tsconfig-build.json',
+      outDir: 'dist',
+      insertTypesEntry: true,
+      cleanVueFileName: true,
+      exclude: [
+        '**/*.stories.tsx',
+        '**/*.stories.ts',
+        '**/*.test.tsx',
+        '**/*.test.ts',
+        'stories/**',
+      ],
+    }),
+  ],
+  build: {
+    lib: {
+      entry: './index.ts',
+      name: 'Faency',
+      formats: ['es', 'cjs'],
+      fileName: (format, entryName) => `${entryName}.${format === 'es' ? 'js' : 'cjs'}`,
+    },
+    rollupOptions: {
+      external: [
+        'react/jsx-runtime',
+        ...Object.keys(pkg.dependencies || {}),
+        ...Object.keys(pkg.peerDependencies || {}),
+      ],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+        },
+        preserveModules: true,
+        preserveModulesRoot: '.',
+      },
+    },
+    outDir: 'dist',
+    emptyOutDir: true,
+    sourcemap: true,
+    minify: false,
   },
-  plugins: [react()],
 });