refactor: migrate to vite

.gitignore

@@ -43,5 +43,6 @@ jspm_packages
 # Custom function testers
 test/*.func.*
 
-# Build directory
+# Build directories
 dist
+dist-example

.prettierignore

@@ -1,5 +1,5 @@
 dist/
-docs/
+dist-example/
 test/
 *lock*
 

README.md

@@ -1,7 +1,6 @@
 # react-smart-data-table
 
 [![npm version](https://badge.fury.io/js/react-smart-data-table.svg)][npm]
-[![jest](https://jestjs.io/img/jest-badge.svg)][jest]
 [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-v2.0%20adopted-ff69b4.svg)][contributor]
 ![Workflow Status](https://github.com/joaocarmo/react-smart-data-table/workflows/Tests/badge.svg)
 
@@ -16,10 +15,6 @@ in the spirit of _plug and play_.
 Just feed it an array of equal JSON objects and it will create a template free
 table that can be customized easily with any framework (or custom CSS).
 
-If you want more control over the data rendering process or don't need the
-_smarts_, check out
-[react-very-simple-data-table][react-very-simple-data-table].
-
 ## Features
 
 It currently supports:
@@ -335,9 +330,8 @@ data using the `dataKeyResolver` prop.
 ### Simple sortable table (with Semantic UI)
 
 ```jsx
-import React from 'react'
-import ReactDOM from 'react-dom'
-import faker from 'faker'
+import { faker } from '@faker-js/faker'
+import { createRoot } from 'react-dom/client'
 import SmartDataTable from 'react-smart-data-table'
 
 const testData = []
@@ -346,25 +340,24 @@ const numResults = 100
 for (let i = 0; i < numResults; i++) {
   testData.push({
     _id: i,
-    fullName: faker.name.findName(),
+    fullName: faker.person.fullName(),
     'email.address': faker.internet.email(),
-    phone_number: faker.phone.phoneNumber(),
+    phone_number: faker.phone.number(),
     address: {
-      city: faker.address.city(),
-      state: faker.address.state(),
-      country: faker.address.country(),
+      city: faker.location.city(),
+      state: faker.location.state(),
+      country: faker.location.country(),
     },
   })
 }
 
-ReactDOM.render(
+createRoot(document.getElementById('app')).render(
   <SmartDataTable
     data={testData}
     name="test-table"
     className="ui compact selectable table"
     sortable
   />,
-  document.getElementById('app'),
 )
 ```
 
@@ -419,15 +412,11 @@ pnpm start
 [contributor]: ./CODE_OF_CONDUCT.md
 [control-page]: https://github.com/joaocarmo/react-smart-data-table/issues/60#issuecomment-974718595
 [double-click]: https://github.com/joaocarmo/react-smart-data-table/issues/59#issuecomment-969371513
-[example-source]: ./example/index.js
+[example-source]: ./example/index.jsx
 [fetch]: https://fetch.spec.whatwg.org/
 [hide-pagination]: https://github.com/joaocarmo/react-smart-data-table/issues/42#issuecomment-828593880
-[jest]: https://github.com/facebook/jest
-[lgtm-alerts]: https://lgtm.com/projects/g/joaocarmo/react-smart-data-table/alerts/
-[lgtm-context]: https://lgtm.com/projects/g/joaocarmo/react-smart-data-table/context:javascript
 [npm]: https://badge.fury.io/js/react-smart-data-table
 [pagination]: https://react.semantic-ui.com/addons/pagination/
-[react-very-simple-data-table]: https://github.com/joaocarmo/react-very-simple-data-table
 [semantic]: http://joaocarmo.com/react-smart-data-table/
 [somewhere-i-belong]: https://github.com/joaocarmo/somewhere-i-belong
 [ssr-integration]: https://github.com/joaocarmo/react-smart-data-table/issues/50#issuecomment-963060887

TODO.md

@@ -4,4 +4,3 @@
 - Add multiple column sorting
 - Add sticky headers
 - Allow custom elements: _ErrorBoundary_, _Toggles_, _CellValue_
-- Improve performance

eslint.config.mjs

@@ -15,14 +15,7 @@ export default tseslint.config(
     files: ['**/*.{js,jsx,mjs,cjs,ts,tsx}'],
   },
   {
-    ignores: [
-      'dist/**',
-      '.eslintrc.js',
-      'babel.config.js',
-      'jest.config.js',
-      'webpack.config.js',
-      'webpack.dev.js',
-    ],
+    ignores: ['dist/**', 'dist-example/**'],
   },
   {
     languageOptions: {

example/index.js → example/index.jsx

@@ -1,8 +1,8 @@
 import { PureComponent } from 'react'
 import { createRoot } from 'react-dom/client'
 import { imgb64 } from '../lib/helpers/tests'
-import SmartDataTable from 'react-smart-data-table-dev'
-import 'react-smart-data-table-dev.css'
+import SmartDataTable from '../lib'
+import '../lib/css/basic.css'
 
 const sematicUI = {
   change: 'ui labeled secondary icon button',
@@ -24,7 +24,7 @@
 }
 
 const generateData = async (numResults = 0) => {
-  const faker = await import('@withshepherd/faker')
+  const { faker } = await import('@faker-js/faker')
 
   let total = numResults || 0
 
@@ -38,27 +38,27 @@
     const row = {
       _id: i,
       address: {
-        city: faker.address.city(),
-        state: faker.address.state(),
-        country: faker.address.country(),
+        city: faker.location.city(),
+        state: faker.location.state(),
+        country: faker.location.country(),
       },
       url: faker.internet.url(),
       isMarried: faker.datatype.boolean(),
       actions: null,
       avatar: imgb64,
-      fullName: faker.name.findName(),
-      _username: faker.internet.userName(),
+      fullName: faker.person.fullName(),
+      _username: faker.internet.username(),
       password_: faker.internet.password(),
       'email.address': faker.internet.email(),
-      phone_number: faker.phone.phoneNumber(),
+      phone_number: faker.phone.number(),
     }
 
     // Add random attributes to random rows (after the first)
     if (i > 0 && faker.datatype.boolean()) {
       const column = faker.database.column()
 
       if (!row[column]) {
-        row[column] = faker.datatype.number()
+        row[column] = faker.number.int()
       }
     }
 
@@ -149,16 +149,13 @@
     this.setState({ apiUrl: apiUrlNew })
   }
 
-  handleDelete(event, idx, _row) {
+  handleDelete(event, _idx, row) {
     event.preventDefault()
     event.stopPropagation()
 
     const { data } = this.state
-    const newData = JSON.parse(JSON.stringify(data))
 
-    newData.splice(idx, 1)
-
-    this.setState({ data: newData })
+    this.setState({ data: data.filter((r) => r._id !== row._id) })
   }
 
   getHeaders() {

index.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>React Smart Data Table</title>
+    <meta
+      name="description"
+      content="A smart data table component for React.js meant to be configuration free"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
+      integrity="sha512-8bHTC73gkZ7rZ7vpqUQThUDhqcNFyYi2xgDgPDHc+GXVGHXq+xPjynxIopALmOPqzo9JZj0k6OqqewdGO3EsrQ=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+  </head>
+  <body>
+    <div id="app">Loading...</div>
+    <script type="module" src="/example/index.jsx"></script>
+  </body>
+</html>

lib/SmartDataTable.perf.test.tsx

@@ -29,10 +29,10 @@ const PER_PAGE = 50
 const testData = generateRows(ROW_COUNT)
 
 describe('SmartDataTable Performance', () => {
-  let parseDataForRowsSpy: ReturnType<typeof jest.spyOn>
+  let parseDataForRowsSpy: ReturnType<typeof vi.spyOn>
 
   beforeEach(() => {
-    parseDataForRowsSpy = jest.spyOn(utils, 'parseDataForRows')
+    parseDataForRowsSpy = vi.spyOn(utils, 'parseDataForRows')
   })
 
   afterEach(() => {

lib/components/Paginator.test.tsx

@@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event'
 import Paginator from './Paginator'
 import type { PaginatorProps } from './Paginator'
 
-const mockPageChange = jest.fn()
+const mockPageChange = vi.fn()
 
 const testCases = [
   // activePage, totalPages, renderedItems, activeItem

lib/components/SelectAll.test.tsx

@@ -13,7 +13,7 @@ describe('SelectAll', () => {
           selectAllWord,
           unSelectAllWord,
         }}
-        handleToggleAll={jest.fn()}
+        handleToggleAll={vi.fn()}
       />,
     )
 

lib/test-globals.d.ts

@@ -0,0 +1,9 @@
+export interface FetchMock {
+  (...args: Parameters<typeof fetch>): ReturnType<typeof fetch>
+  mockResponseOnce(body: string, init?: ResponseInit): void
+  mock: { calls: unknown[][] }
+}
+
+declare global {
+  const fetchMock: FetchMock
+}