Publish bundles instead of modules, use babel only for transpilation

.eslintrc.js

@@ -483,7 +483,7 @@ const rules = {
   '@typescript-eslint/consistent-indexed-object-style': 1,
   '@typescript-eslint/consistent-type-assertions': [2, { assertionStyle: 'as', objectLiteralTypeAssertions: 'never' }],
   '@typescript-eslint/consistent-type-definitions': [1, 'interface'],
-  '@typescript-eslint/consistent-type-imports': [1, { prefer: 'no-type-imports' }],
+  '@typescript-eslint/consistent-type-imports': 1,
   '@typescript-eslint/explicit-function-return-type': 0,
   '@typescript-eslint/explicit-member-accessibility': 0,
   '@typescript-eslint/explicit-module-boundary-types': 0,

.github/workflows/ci.yml

@@ -24,6 +24,8 @@ jobs:
       run: npm run typecheck
     - name: Test
       run: npm t -- --coverage --colors
+    - name: Bundle
+      run: npm run build
 
   storybook:
     runs-on: ubuntu-latest

.storybook/webpack.config.js

@@ -11,9 +11,6 @@ module.exports = function({ config, mode }) {
     use: [{
       loader: 'babel-loader',
       options: { cacheDirectory: !isProd }
-    }, {
-      loader: 'ts-loader',
-      options: { onlyCompileBundledFiles: true }
     }]
   }, {
     test: /\.less$/,

README.md

@@ -51,7 +51,6 @@ See [documentation](https://babeljs.io/docs/en/)
   ```
   - Babel's `env` preset, if configured correctly, will transform this import so only the necessary polyfills are included in your bundle.
 - Polyfilling the [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) API is required for older browsers.
-- Optional: we also recommend using the [`babel-plugin-optimize-clsx` plugin](https://www.npmjs.com/package/babel-plugin-optimize-clsx).
 </details>
 
 <details>

babel.config.json

@@ -1,11 +1,18 @@
 {
   "presets": [
     ["@babel/env", {
+      "loose": true,
       "bugfixes": true,
       "shippedProposals": true,
       "corejs": 3,
-      "useBuiltIns": "entry"
-    }]
+      "useBuiltIns": "entry",
+      "include": [
+        "@babel/proposal-nullish-coalescing-operator",
+        "@babel/proposal-optional-chaining"
+      ]
+    }],
+    ["@babel/react", { "useSpread": true }],
+    "@babel/typescript"
   ],
   "plugins": [
     ["@babel/transform-runtime", { "useESModules": true }],

jest.config.mjs

@@ -2,14 +2,6 @@
 // https://jestjs.io/docs/en/configuration.html
 
 export default {
-  preset: 'ts-jest',
-  globals: {
-    'ts-jest': {
-      tsconfig: {
-        esModuleInterop: true
-      }
-    }
-  },
   coverageProvider: 'v8',
   collectCoverageFrom: [
     'src/**/*.{ts,tsx}'

package.json

@@ -18,13 +18,13 @@
         "import": "./lib/bundle.mjs",
         "require": "./lib/bundle.cjs"
       },
-      "default": "./lib/index.js"
+      "default": "./lib/bundle.mjs"
     },
     "./dist/": "./dist/"
   },
-  "browser": "./lib/index.js",
+  "browser": "./lib/bundle.mjs",
   "main": "./lib/bundle.cjs",
-  "module": "./lib/index.js",
+  "module": "./lib/bundle.mjs",
   "types": "./lib/index.d.ts",
   "files": [
     "dist",
@@ -36,16 +36,15 @@
   ],
   "scripts": {
     "start": "start-storybook --quiet --no-dll -p 6006",
-    "build": "tsc",
+    "build": "rollup --config --no-stdin",
     "postbuild": "node tools/buildStylesheets.mjs",
-    "rollup": "rollup --config --no-stdin",
     "test": "jest",
     "test:watch": "jest --watch",
     "eslint": "eslint --ext mjs,ts,tsx --max-warnings 0 -f codeframe --cache --color src stories test tools",
     "eslint:fix": "npm run eslint -- --fix",
     "typecheck": "tsc -p tsconfig.all.json",
     "build-storybook": "build-storybook --quiet --no-dll",
-    "prepublishOnly": "npm install && npm run build && npm run rollup",
+    "prepublishOnly": "npm install && npm run build && tsc",
     "postpublish": "git push --follow-tags origin HEAD"
   },
   "dependencies": {
@@ -55,9 +54,12 @@
     "@babel/core": "^7.12.3",
     "@babel/plugin-transform-runtime": "^7.12.1",
     "@babel/preset-env": "^7.12.1",
+    "@babel/preset-react": "^7.12.5",
+    "@babel/preset-typescript": "^7.12.1",
     "@babel/runtime": "^7.12.1",
     "@juggle/resize-observer": "^3.2.0",
     "@popperjs/core": "^2.5.3",
+    "@rollup/plugin-babel": "^5.2.1",
     "@rollup/plugin-node-resolve": "^10.0.0",
     "@storybook/react": "^6.0.27",
     "@testing-library/jest-dom": "^5.11.5",
@@ -97,9 +99,6 @@
     "react-select": "^3.1.0",
     "react-sortable-hoc": "^1.11.0",
     "rollup": "^2.32.1",
-    "rollup-plugin-sourcemaps": "^0.6.3",
-    "ts-jest": "^26.4.3",
-    "ts-loader": "^8.0.7",
     "typescript": "~4.0.5"
   },
   "peerDependencies": {

rollup.config.mjs

@@ -1,8 +1,11 @@
+import { isAbsolute } from 'path';
+import { babel } from '@rollup/plugin-babel';
 import nodeResolve from '@rollup/plugin-node-resolve';
-import sourcemaps from 'rollup-plugin-sourcemaps';
+
+const extensions = ['.ts', '.tsx'];
 
 export default {
-  input: './lib/index.js',
+  input: './src/index.ts',
   output: [{
     file: './lib/bundle.mjs',
     format: 'es',
@@ -15,13 +18,16 @@ export default {
     sourcemap: true,
     interop: false
   }],
-  external: [
-    'clsx',
-    'react',
-    'react-dom'
-  ],
+  external: id => !id.startsWith('.') && !isAbsolute(id),
   plugins: [
-    sourcemaps(),
-    nodeResolve()
+    babel({
+      babelHelpers: 'runtime',
+      extensions,
+      // remove all comments except terser annotations
+      // https://github.com/terser/terser#annotations
+      // https://babeljs.io/docs/en/options#shouldprintcomment
+      shouldPrintComment: comment => /^[@#]__.+__$/.test(comment)
+    }),
+    nodeResolve({ extensions })
   ]
 };

src/Cell.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, memo, useRef } from 'react';
 import clsx from 'clsx';
 
-import { CellRendererProps } from './types';
+import type { CellRendererProps } from './types';
 import { wrapEvent } from './utils';
 import { useCombinedRefs } from './hooks';
 

src/Columns.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { SelectCellFormatter } from './formatters';
-import { Column } from './types';
+import type { Column } from './types';
 import { stopPropagation } from './utils/domUtils';
 
 export const SELECT_COLUMN_KEY = 'select-row';

src/DataGrid.tsx

@@ -26,7 +26,7 @@ import {
   isDefaultCellInput
 } from './utils';
 
-import {
+import type {
   CalculatedColumn,
   Column,
   Filters,
@@ -39,7 +39,7 @@ import {
   FillEvent,
   PasteEvent
 } from './types';
-import { CellNavigationMode, SortDirection } from './enums';
+import type { CellNavigationMode, SortDirection } from './enums';
 
 interface SelectCellState extends Position {
   mode: 'SELECT';

src/EditCell.tsx

@@ -2,7 +2,7 @@ import React, { useState, useCallback } from 'react';
 import clsx from 'clsx';
 
 import EditorContainer from './editors/EditorContainer';
-import { CellRendererProps, SharedEditorProps, Omit } from './types';
+import type { CellRendererProps, SharedEditorProps, Omit } from './types';
 
 type SharedCellRendererProps<R, SR> = Pick<CellRendererProps<R, SR>,
   | 'rowIdx'

src/FilterRow.tsx

@@ -1,8 +1,8 @@
 import React, { createElement, memo } from 'react';
 import clsx from 'clsx';
 
-import { CalculatedColumn, Filters } from './types';
-import { DataGridProps } from './DataGrid';
+import type { CalculatedColumn, Filters } from './types';
+import type { DataGridProps } from './DataGrid';
 
 type SharedDataGridProps<R, SR> = Pick<DataGridProps<R, SR>,
   | 'filters'

src/GroupCell.tsx

@@ -1,8 +1,8 @@
 import React, { memo } from 'react';
 import clsx from 'clsx';
 
-import { CalculatedColumn } from './types';
-import { GroupRowRendererProps } from './GroupRow';
+import type { CalculatedColumn } from './types';
+import type { GroupRowRendererProps } from './GroupRow';
 
 type SharedGroupRowRendererProps<R, SR> = Pick<GroupRowRendererProps<R, SR>,
   | 'id'

src/GroupRow.tsx

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 import clsx from 'clsx';
 
-import { CalculatedColumn, Position, SelectRowEvent, Omit } from './types';
+import type { CalculatedColumn, Position, SelectRowEvent, Omit } from './types';
 import { SELECT_COLUMN_KEY } from './Columns';
 import GroupCell from './GroupCell';
 

src/HeaderCell.tsx

@@ -1,11 +1,11 @@
 import React, { createElement } from 'react';
 import clsx from 'clsx';
 
-import { CalculatedColumn } from './types';
-import { HeaderRowProps } from './HeaderRow';
+import type { CalculatedColumn } from './types';
+import type { HeaderRowProps } from './HeaderRow';
 import SortableHeaderCell from './headerCells/SortableHeaderCell';
 import ResizableHeaderCell from './headerCells/ResizableHeaderCell';
-import { SortDirection } from './enums';
+import type { SortDirection } from './enums';
 
 function getAriaSort(sortDirection?: SortDirection) {
   switch (sortDirection) {

src/HeaderRow.tsx

@@ -1,9 +1,9 @@
 import React, { useCallback, memo } from 'react';
 
 import HeaderCell from './HeaderCell';
-import { CalculatedColumn } from './types';
+import type { CalculatedColumn } from './types';
 import { assertIsValidKeyGetter } from './utils';
-import { DataGridProps } from './DataGrid';
+import type { DataGridProps } from './DataGrid';
 
 type SharedDataGridProps<R, SR> = Pick<DataGridProps<R, SR>,
   | 'rows'

src/Row.tsx

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 
 import Cell from './Cell';
 import EditCell from './EditCell';
-import { RowRendererProps, SelectedCellProps } from './types';
+import type { RowRendererProps, SelectedCellProps } from './types';
 import { wrapEvent } from './utils';
 
 function Row<R, SR = unknown>({

src/SummaryCell.tsx

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 import clsx from 'clsx';
 
-import { CellRendererProps } from './types';
+import type { CellRendererProps } from './types';
 
 type SharedCellRendererProps<R, SR> = Pick<CellRendererProps<R, SR>, 'column'>;
 

src/SummaryRow.tsx

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 
 import SummaryCell from './SummaryCell';
-import { RowRendererProps } from './types';
+import type { RowRendererProps } from './types';
 
 type SharedRowRendererProps<R, SR> = Pick<RowRendererProps<R, SR>,
   | 'viewportColumns'

src/editors/EditorContainer.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { createPortal } from 'react-dom';
 
-import { EditorProps } from '../types';
+import type { EditorProps } from '../types';
 import { useClickOutside } from '../hooks';
 
 export default function EditorContainer<R, SR>({

src/editors/TextEditor.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { EditorProps } from '../types';
+import type { EditorProps } from '../types';
 
 function autoFocusAndSelect(input: HTMLInputElement | null) {
   input?.focus();

src/formatters/ToggleGroupFormatter.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { GroupFormatterProps } from '../types';
+import type { GroupFormatterProps } from '../types';
 import { useFocusRef } from '../hooks/useFocusRef';
 
 export function ToggleGroupFormatter<R, SR>({

src/formatters/ValueFormatter.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormatterProps } from '../types';
+import type { FormatterProps } from '../types';
 
 export function ValueFormatter<R, SR>(props: FormatterProps<R, SR>) {
   try {

src/headerCells/ResizableHeaderCell.tsx

@@ -1,5 +1,5 @@
-import React, { cloneElement } from 'react';
-import { CalculatedColumn } from '../types';
+import { cloneElement } from 'react';
+import type { CalculatedColumn } from '../types';
 
 interface ResizableHeaderCellProps<R, SR> {
   children: React.ReactElement<React.ComponentProps<'div'>>;

src/headerCells/SortableHeaderCell.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { HeaderCellProps } from '../HeaderCell';
-import { SortDirection } from '../enums';
+import type { HeaderCellProps } from '../HeaderCell';
+import type { SortDirection } from '../enums';
 
 const SORT_TEXT = {
   ASC: '\u25B2',

src/hooks/useViewportColumns.ts

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 
-import { CalculatedColumn, Column } from '../types';
-import { DataGridProps } from '../DataGrid';
+import type { CalculatedColumn, Column } from '../types';
+import type { DataGridProps } from '../DataGrid';
 import { ValueFormatter, ToggleGroupFormatter } from '../formatters';
 import { SELECT_COLUMN_KEY } from '../Columns';
 

src/hooks/useViewportRows.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 
-import { GroupRow, GroupByDictionary, Dictionary } from '../types';
+import type { GroupRow, GroupByDictionary, Dictionary } from '../types';
 const RENDER_BACTCH_SIZE = 8;
 
 interface ViewportRowsArgs<R> {

src/index.ts

@@ -1,12 +1,16 @@
-export { default, DataGridProps, DataGridHandle } from './DataGrid';
+export { default } from './DataGrid';
+export type { DataGridProps, DataGridHandle } from './DataGrid';
 export { default as Cell } from './Cell';
 export { default as Row } from './Row';
 export * from './Columns';
 export * from './formatters';
 export { default as TextEditor } from './editors/TextEditor';
 export { default as SortableHeaderCell } from './headerCells/SortableHeaderCell';
-export * from './enums';
-export {
+export type {
+  CellNavigationMode,
+  SortDirection
+} from './enums';
+export type {
   Column,
   CalculatedColumn,
   FormatterProps,

src/types.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { ReactElement } from 'react';
-import { SortDirection } from './enums';
+import type { ReactElement } from 'react';
+import type { SortDirection } from './enums';
 
 export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 

src/utils/columnUtils.ts

@@ -1,4 +1,4 @@
-import { CalculatedColumn } from '../types';
+import type { CalculatedColumn } from '../types';
 
 export function getColumnScrollPosition<R, SR>(columns: readonly CalculatedColumn<R, SR>[], idx: number, currentScrollLeft: number, currentClientWidth: number): number {
   let left = 0;