Modernize code

* Typescript
* Rollup
* Function component

Author: jorrit

.eslintignore

@@ -1,4 +1,3 @@
 es
 lib
-umd
 demo/dist

.eslintrc.json

@@ -1,12 +1,28 @@
- {
-   "extends": "airbnb",
-   "parser": "babel-eslint",
-   "env": {
-     "browser": true
-   },
-   "rules": {
-     "react/jsx-filename-extension": 0,
-     "import/no-extraneous-dependencies": 0,
-     "react/jsx-props-no-spreading": 0
-   }
+{
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "extends": [
+    // Uses the recommended rules from @eslint-plugin-react
+    "plugin:react/recommended",
+    // No react-import
+    "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended",
+    // Uses the recommended rules from the @typescript-eslint/eslint-plugin
+    "plugin:@typescript-eslint/recommended",
+    // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array
+    "plugin:prettier/recommended"
+  ],
+  "rules": {
+  }
 }

.github/workflows/test.yml

@@ -7,6 +7,9 @@ jobs:
 
         runs-on: ubuntu-latest
 
+        env:
+            CI: true
+
         strategy:
             matrix:
                 node-version: [14.x, 16.x, 18.x]
@@ -17,9 +20,7 @@ jobs:
               uses: actions/setup-node@v3
               with:
                   node-version: ${{ matrix.node-version }}
+            - run: npm install -g npm@latest # to support newer lock file
             - run: npm ci
             - run: npm run lint
-            - run: echo "NODE_OPTIONS=--openssl-legacy-provider" >> $GITHUB_ENV
-              if: ${{ matrix.node-version == '18.x' }}
-            - run: npm run test:coverage
-            - run: echo "NODE_OPTIONS=" >> $GITHUB_ENV
+            - run: npm run test

.gitignore

@@ -3,6 +3,5 @@
 /es
 /lib
 /node_modules
-/umd
 npm-debug.log*
 .idea

CONTRIBUTING.md

@@ -10,6 +10,11 @@ A responsive container for displaying tables traditionally on wide screens and w
 
 `npm install react-hyper-responsive-table`
 
+This module uses `useSyncExternalStore`, which was introduced in React 18. If you are still using React 17 or older, also install
+[use-sync-external-store](https://www.npmjs.com/package/use-sync-external-store):
+
+`npm install use-sync-external-store`
+
 ## Example
 
 ```jsx

README.md

@@ -0,0 +1,18 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-typescript',
+      {
+        isTSX: true,
+        jsxPragma: 'h',
+        allExtensions: true,
+        allowNamespaces: false,
+        allowDeclareFields: true,
+      },
+    ],
+
+    ['@babel/preset-env', { targets: { node: 'current' } }],
+    ['@babel/preset-react', { runtime: 'automatic' }],
+  ],
+  plugins: ['@babel/plugin-transform-runtime'],
+};

babel.config.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from 'react-dom';
 
 import './demo.css';
@@ -9,66 +8,45 @@ const headers = {
   name: 'Name',
   role: 'Role',
 };
+
 const rows = [
   {
     name: 'Marlon Brando',
-    role: (
-      <a href="https://en.wikipedia.org/wiki/Vito_Corleone">
-        Vito Corleone
-      </a>),
+    role: <a href="https://en.wikipedia.org/wiki/Vito_Corleone">Vito Corleone</a>,
     image: <img src="https://upload.wikimedia.org/wikipedia/en/2/21/Godfather15_flip.jpg" alt="Vito Corleone" />,
   },
   {
     image: <img src="https://upload.wikimedia.org/wikipedia/en/d/df/Michaelcoreleone.jpg" alt="Al Pacino" />,
     name: 'Al Pacino',
-    role: (
-      <a href="https://en.wikipedia.org/wiki/Michael_Corleone">
-        Michael Corleone
-      </a>),
+    role: <a href="https://en.wikipedia.org/wiki/Michael_Corleone">Michael Corleone</a>,
   },
   {
     image: <img src="https://upload.wikimedia.org/wikipedia/en/9/9d/Santino_corleone_2.jpg" alt="Santino Corleone" />,
     name: 'James Caan',
-    role: (
-      <a href="https://en.wikipedia.org/wiki/Santino_Corleone">
-        Santino Corleone
-      </a>),
+    role: <a href="https://en.wikipedia.org/wiki/Santino_Corleone">Santino Corleone</a>,
   },
   {
     image: <img src="https://upload.wikimedia.org/wikipedia/en/6/67/Tom_Hagen.jpg" alt="Tom Hagen" />,
     name: 'Robert Duvall',
-    role: (
-      <a href="https://en.wikipedia.org/wiki/Tom_Hagen">
-        Tom Hagen
-      </a>),
+    role: <a href="https://en.wikipedia.org/wiki/Tom_Hagen">Tom Hagen</a>,
   },
   {
     image: <img src="https://upload.wikimedia.org/wikipedia/en/e/e7/FredoCorleone.jpg" alt="Fredo Corleone" />,
     name: 'John Cazale',
-    role: (
-      <a href="https://en.wikipedia.org/wiki/Fredo_Corleone">
-        Fredo Corleone
-      </a>),
+    role: <a href="https://en.wikipedia.org/wiki/Fredo_Corleone">Fredo Corleone</a>,
   },
   {
     image: <img src="https://upload.wikimedia.org/wikipedia/tr/9/9c/Godf3Connie2.jpg" alt="Connie Corleone" />,
     name: 'Talia Shire',
-    role: (
-      <a href="https://en.wikipedia.org/wiki/Connie_Corleone">
-        Connie Corleone
-      </a>),
+    role: <a href="https://en.wikipedia.org/wiki/Connie_Corleone">Connie Corleone</a>,
   },
 ];
-const keyGetter = (row) => row.name;
+const keyGetter = row => row.name;
 
 const Demo = () => (
   <div>
-    <h1>
-      react-hyper-responsive-table demo
-    </h1>
-    <p>
-      The breakpoint of this demo is set to 578 pixels.
-    </p>
+    <h1>react-hyper-responsive-table demo</h1>
+    <p>The breakpoint of this demo is set to 578 pixels.</p>
     <ReactHyperResponsiveTable
       headers={headers}
       rows={rows}
@@ -80,4 +58,4 @@ const Demo = () => (
   </div>
 );
 
-render(<Demo />, document.querySelector('#demo'));
+render(<Demo />, document.querySelector('body'));

demo/src/index.js demo/src/index.tsxdemo/src/index.js renamed to demo/src/index.tsx

@@ -0,0 +1,45 @@
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import nodeResolve from '@rollup/plugin-node-resolve';
+import typescript from 'rollup-plugin-typescript2';
+import css from 'rollup-plugin-import-css';
+import commonjs from '@rollup/plugin-commonjs';
+import html from '@rollup/plugin-html';
+import terser from '@rollup/plugin-terser';
+
+const inputDir = dirname(fileURLToPath(import.meta.url));
+const outputDir = join(inputDir, '..', 'dist');
+
+export default {
+  input: join(inputDir, 'index.tsx'),
+  external: [''],
+  output: [
+    {
+      dir: outputDir,
+      format: 'es',
+      sourcemap: false,
+    },
+  ],
+  plugins: [
+    nodeResolve({ browser: true }),
+    commonjs({}),
+    typescript({
+      tsconfigOverride: {
+        compilerOptions: {
+          declaration: false,
+        },
+      },
+    }),
+    terser({
+      compress: { global_defs: { 'process.env.NODE_ENV': 'production' } },
+    }),
+    css({}),
+    html({
+      meta: [
+        { charset: 'utf-8' },
+        { name: 'viewport', content: 'width=device-width,initial-scale=1,shrink-to-fit=no' },
+      ],
+      title: 'react-hyper-responsive-table demo',
+    }),
+  ],
+};