diff --git a/.eslintrc.js b/.eslintrc.js index bb5e7e97c5..cd63449466 100644 --- a/.eslintrc.js +++ b/.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, diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 5821cdb54c..9e1ef5c1cf 100644 --- a/.github/workflows/ci.yml +++ b/.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 diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index 51db6d0bba..b67a31504c 100644 --- a/.storybook/webpack.config.js +++ b/.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$/, diff --git a/README.md b/README.md index 249df82df5..aba1987c20 100644 --- a/README.md +++ b/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).
diff --git a/babel.config.json b/babel.config.json index 9e4c2d7791..da0703e730 100644 --- a/babel.config.json +++ b/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 }], diff --git a/jest.config.mjs b/jest.config.mjs index 2230e3c08a..58e3d20b19 100644 --- a/jest.config.mjs +++ b/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}' diff --git a/package.json b/package.json index 2df941b006..cdaa6ca901 100644 --- a/package.json +++ b/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": { diff --git a/rollup.config.mjs b/rollup.config.mjs index ee0d55ec23..57e4ee519c 100644 --- a/rollup.config.mjs +++ b/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 }) ] }; diff --git a/src/Cell.tsx b/src/Cell.tsx index 227d1b6b15..8fa9c3ea5a 100644 --- a/src/Cell.tsx +++ b/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'; diff --git a/src/Columns.tsx b/src/Columns.tsx index 7481d8d4c4..273c2834bc 100644 --- a/src/Columns.tsx +++ b/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'; diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx index 3c51c229bf..c55c3183db 100644 --- a/src/DataGrid.tsx +++ b/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'; diff --git a/src/EditCell.tsx b/src/EditCell.tsx index e47f49afdf..4310da02ca 100644 --- a/src/EditCell.tsx +++ b/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 = Pick, | 'rowIdx' diff --git a/src/FilterRow.tsx b/src/FilterRow.tsx index b360f836ac..186de7f35b 100644 --- a/src/FilterRow.tsx +++ b/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 = Pick, | 'filters' diff --git a/src/GroupCell.tsx b/src/GroupCell.tsx index 4905a57840..bcbab237fc 100644 --- a/src/GroupCell.tsx +++ b/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 = Pick, | 'id' diff --git a/src/GroupRow.tsx b/src/GroupRow.tsx index c389ad375a..b35d070ea9 100644 --- a/src/GroupRow.tsx +++ b/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'; diff --git a/src/HeaderCell.tsx b/src/HeaderCell.tsx index 6334f4f692..be092b9009 100644 --- a/src/HeaderCell.tsx +++ b/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) { diff --git a/src/HeaderRow.tsx b/src/HeaderRow.tsx index 1e708718fb..df4258fb4b 100644 --- a/src/HeaderRow.tsx +++ b/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 = Pick, | 'rows' diff --git a/src/Row.tsx b/src/Row.tsx index 0d9dd1d2f1..5b0598e087 100644 --- a/src/Row.tsx +++ b/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({ diff --git a/src/SummaryCell.tsx b/src/SummaryCell.tsx index 3877273822..0ecd07108a 100644 --- a/src/SummaryCell.tsx +++ b/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 = Pick, 'column'>; diff --git a/src/SummaryRow.tsx b/src/SummaryRow.tsx index 5ba38ad8c8..6bfa5fadab 100644 --- a/src/SummaryRow.tsx +++ b/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 = Pick, | 'viewportColumns' diff --git a/src/editors/EditorContainer.tsx b/src/editors/EditorContainer.tsx index 84fa9cd342..29bddc50ca 100644 --- a/src/editors/EditorContainer.tsx +++ b/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({ diff --git a/src/editors/TextEditor.tsx b/src/editors/TextEditor.tsx index 00b6e56a9f..e7bfaba5a7 100644 --- a/src/editors/TextEditor.tsx +++ b/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(); diff --git a/src/formatters/ToggleGroupFormatter.tsx b/src/formatters/ToggleGroupFormatter.tsx index 5265817de9..d99d96bcd1 100644 --- a/src/formatters/ToggleGroupFormatter.tsx +++ b/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({ diff --git a/src/formatters/ValueFormatter.tsx b/src/formatters/ValueFormatter.tsx index 7a9245a0ce..48a532892b 100644 --- a/src/formatters/ValueFormatter.tsx +++ b/src/formatters/ValueFormatter.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { FormatterProps } from '../types'; +import type { FormatterProps } from '../types'; export function ValueFormatter(props: FormatterProps) { try { diff --git a/src/headerCells/ResizableHeaderCell.tsx b/src/headerCells/ResizableHeaderCell.tsx index a0a68ad85e..5e02095d8c 100644 --- a/src/headerCells/ResizableHeaderCell.tsx +++ b/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 { children: React.ReactElement>; diff --git a/src/headerCells/SortableHeaderCell.tsx b/src/headerCells/SortableHeaderCell.tsx index 1a1fd54512..c4abfdb9fe 100644 --- a/src/headerCells/SortableHeaderCell.tsx +++ b/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', diff --git a/src/hooks/useViewportColumns.ts b/src/hooks/useViewportColumns.ts index ee88795192..9d3be59cdb 100644 --- a/src/hooks/useViewportColumns.ts +++ b/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'; diff --git a/src/hooks/useViewportRows.ts b/src/hooks/useViewportRows.ts index 4729e5b7d4..f4b3126ef5 100644 --- a/src/hooks/useViewportRows.ts +++ b/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 { diff --git a/src/index.ts b/src/index.ts index a1d1acd2f1..4b25e0f0ef 100644 --- a/src/index.ts +++ b/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, diff --git a/src/types.ts b/src/types.ts index 1e12456e15..72e4ef8398 100644 --- a/src/types.ts +++ b/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 = Pick>; diff --git a/src/utils/columnUtils.ts b/src/utils/columnUtils.ts index 0d1d869791..ed71e7006b 100644 --- a/src/utils/columnUtils.ts +++ b/src/utils/columnUtils.ts @@ -1,4 +1,4 @@ -import { CalculatedColumn } from '../types'; +import type { CalculatedColumn } from '../types'; export function getColumnScrollPosition(columns: readonly CalculatedColumn[], idx: number, currentScrollLeft: number, currentClientWidth: number): number { let left = 0; diff --git a/src/utils/selectedCellUtils.ts b/src/utils/selectedCellUtils.ts index b19fa758e0..ef6de41f76 100644 --- a/src/utils/selectedCellUtils.ts +++ b/src/utils/selectedCellUtils.ts @@ -1,5 +1,5 @@ -import { CellNavigationMode } from '../enums'; -import { CalculatedColumn, Position, GroupRow } from '../types'; +import type { CellNavigationMode } from '../enums'; +import type { CalculatedColumn, Position, GroupRow } from '../types'; interface IsSelectedCellEditableOpts { selectedPosition: Position; diff --git a/stories/demos/AllFeatures.tsx b/stories/demos/AllFeatures.tsx index a1fbd043ee..9433a4ac4b 100644 --- a/stories/demos/AllFeatures.tsx +++ b/stories/demos/AllFeatures.tsx @@ -1,6 +1,7 @@ import faker from 'faker'; import React, { useState, useRef } from 'react'; -import DataGrid, { Column, SelectColumn, DataGridHandle, TextEditor, FillEvent, PasteEvent } from '../../src'; +import DataGrid, { SelectColumn, TextEditor } from '../../src'; +import type { Column, DataGridHandle, FillEvent, PasteEvent } from '../../src'; import DropDownEditor from './components/Editors/DropDownEditor'; import { ImageFormatter } from './components/Formatters'; diff --git a/stories/demos/CellActions.tsx b/stories/demos/CellActions.tsx index 09d0c71afe..e0b9fd1c91 100644 --- a/stories/demos/CellActions.tsx +++ b/stories/demos/CellActions.tsx @@ -1,7 +1,8 @@ import React, { useState } from 'react'; import faker from 'faker'; -import DataGrid, { Column } from '../../src'; +import DataGrid from '../../src'; +import type { Column } from '../../src'; import { CellActionsFormatter, ImageFormatter } from './components/Formatters'; faker.locale = 'en_GB'; diff --git a/stories/demos/CellNavigation.tsx b/stories/demos/CellNavigation.tsx index 06bf36bc68..fe4bda89c0 100644 --- a/stories/demos/CellNavigation.tsx +++ b/stories/demos/CellNavigation.tsx @@ -1,6 +1,7 @@ import React, { useState } from 'react'; -import DataGrid, { Column, CellNavigationMode } from '../../src'; +import DataGrid from '../../src'; +import type { Column, CellNavigationMode } from '../../src'; interface Row { id: number; diff --git a/stories/demos/ColumnsReordering.tsx b/stories/demos/ColumnsReordering.tsx index 2146e5c993..79d6cc0ed8 100644 --- a/stories/demos/ColumnsReordering.tsx +++ b/stories/demos/ColumnsReordering.tsx @@ -3,7 +3,8 @@ import { DndProvider } from 'react-dnd'; import { HTML5Backend } from 'react-dnd-html5-backend'; import { DraggableHeaderRenderer } from './components/HeaderRenderers'; -import DataGrid, { Column, HeaderRendererProps, SortDirection } from '../../src'; +import DataGrid from '../../src'; +import type { Column, HeaderRendererProps, SortDirection } from '../../src'; interface Row { id: number; diff --git a/stories/demos/CommonFeatures.tsx b/stories/demos/CommonFeatures.tsx index 3f565e2d0b..ed8c290716 100644 --- a/stories/demos/CommonFeatures.tsx +++ b/stories/demos/CommonFeatures.tsx @@ -1,6 +1,7 @@ import React, { useState, useCallback, useMemo } from 'react'; import faker from 'faker'; -import DataGrid, { SelectColumn, Column, SortDirection, TextEditor, SelectCellFormatter } from '../../src'; +import DataGrid, { SelectColumn, TextEditor, SelectCellFormatter } from '../../src'; +import type { Column, SortDirection } from '../../src'; import { stopPropagation } from '../../src/utils'; import { SelectEditor } from './components/Editors/SelectEditor'; diff --git a/stories/demos/ContextMenu.tsx b/stories/demos/ContextMenu.tsx index fd64f4f2d7..08e0197ff2 100644 --- a/stories/demos/ContextMenu.tsx +++ b/stories/demos/ContextMenu.tsx @@ -3,7 +3,8 @@ import { createPortal } from 'react-dom'; import faker from 'faker'; import { ContextMenu, MenuItem, SubMenu, ContextMenuTrigger } from 'react-contextmenu'; -import DataGrid, { Column, Row as GridRow, RowRendererProps } from '../../src'; +import DataGrid, { Row as GridRow } from '../../src'; +import type { Column, RowRendererProps } from '../../src'; import './react-contextmenu.less'; interface Row { diff --git a/stories/demos/Grouping.tsx b/stories/demos/Grouping.tsx index f69bd6d3f2..dd0c588ed9 100644 --- a/stories/demos/Grouping.tsx +++ b/stories/demos/Grouping.tsx @@ -1,10 +1,12 @@ import React, { useState, useMemo } from 'react'; import { groupBy as rowGrouper } from 'lodash'; -import Select, { components, ValueType, OptionsType, Props as SelectProps } from 'react-select'; +import Select, { components } from 'react-select'; +import type { ValueType, OptionsType, Props as SelectProps } from 'react-select'; import { SortableContainer, SortableElement } from 'react-sortable-hoc'; import faker from 'faker'; -import DataGrid, { Column, SelectColumn } from '../../src'; +import DataGrid, { SelectColumn } from '../../src'; +import type { Column } from '../../src'; import './Grouping.less'; interface Row { diff --git a/stories/demos/HeaderFilters.tsx b/stories/demos/HeaderFilters.tsx index 90df198d1c..31c6c3abb2 100644 --- a/stories/demos/HeaderFilters.tsx +++ b/stories/demos/HeaderFilters.tsx @@ -2,7 +2,8 @@ import React, { useMemo, useState } from 'react'; import Select from 'react-select'; import faker from 'faker'; -import DataGrid, { Column, Filters } from '../../src'; +import DataGrid from '../../src'; +import type { Column, Filters } from '../../src'; import { NumericFilter } from './components/Filters'; import './HeaderFilters.less'; diff --git a/stories/demos/MillionCells.tsx b/stories/demos/MillionCells.tsx index 08b543023b..14510a4bf6 100644 --- a/stories/demos/MillionCells.tsx +++ b/stories/demos/MillionCells.tsx @@ -1,5 +1,6 @@ import React, { useMemo } from 'react'; -import DataGrid, { Column, FormatterProps } from '../../src'; +import DataGrid from '../../src'; +import type { Column, FormatterProps } from '../../src'; type Row = undefined; const rows: readonly Row[] = Array(1000); diff --git a/stories/demos/NoRows.tsx b/stories/demos/NoRows.tsx index 8944015e7f..7c1273eda0 100644 --- a/stories/demos/NoRows.tsx +++ b/stories/demos/NoRows.tsx @@ -1,5 +1,6 @@ import React from 'react'; -import DataGrid, { Column } from '../../src'; +import DataGrid from '../../src'; +import type { Column } from '../../src'; function EmptyRowsRenderer() { return
Nothing to show (´・ω・`)
; diff --git a/stories/demos/Resizable.tsx b/stories/demos/Resizable.tsx index f3b63f3019..1b6057733d 100644 --- a/stories/demos/Resizable.tsx +++ b/stories/demos/Resizable.tsx @@ -1,5 +1,6 @@ import React from 'react'; -import DataGrid, { Column, FormatterProps } from '../../src'; +import DataGrid from '../../src'; +import type { Column, FormatterProps } from '../../src'; type Row = undefined; const rows: readonly Row[] = Array(100); diff --git a/stories/demos/RowsReordering.tsx b/stories/demos/RowsReordering.tsx index 8dd84ed32c..8f2cc86cb9 100644 --- a/stories/demos/RowsReordering.tsx +++ b/stories/demos/RowsReordering.tsx @@ -3,7 +3,8 @@ import { DndProvider } from 'react-dnd'; import { HTML5Backend } from 'react-dnd-html5-backend'; import { DraggableRowRenderer } from './components/RowRenderers'; -import DataGrid, { Column } from '../../src'; +import DataGrid from '../../src'; +import type { Column } from '../../src'; interface Row { id: number; diff --git a/stories/demos/ScrollToRow.tsx b/stories/demos/ScrollToRow.tsx index 9658d926c2..dbc6b350d4 100644 --- a/stories/demos/ScrollToRow.tsx +++ b/stories/demos/ScrollToRow.tsx @@ -1,5 +1,6 @@ import React, { useState, useRef } from 'react'; -import DataGrid, { Column, DataGridHandle } from '../../src'; +import DataGrid from '../../src'; +import type { Column, DataGridHandle } from '../../src'; interface Row { id: number; diff --git a/stories/demos/TreeView.tsx b/stories/demos/TreeView.tsx index cd21659df9..4923989aed 100644 --- a/stories/demos/TreeView.tsx +++ b/stories/demos/TreeView.tsx @@ -1,6 +1,7 @@ import React, { useState, useReducer, useMemo } from 'react'; -import DataGrid, { Column } from '../../src'; +import DataGrid from '../../src'; +import type { Column } from '../../src'; import { CellExpanderFormatter, ChildRowDeleteButton } from './components/Formatters'; interface Row { diff --git a/stories/demos/components/Editors/DropDownEditor.tsx b/stories/demos/components/Editors/DropDownEditor.tsx index 4915008a25..274753becf 100644 --- a/stories/demos/components/Editors/DropDownEditor.tsx +++ b/stories/demos/components/Editors/DropDownEditor.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { EditorProps } from '../../../../src'; -import { Row } from '../../AllFeatures'; +import type { EditorProps } from '../../../../src'; +import type { Row } from '../../AllFeatures'; const titles = ['Dr.', 'Mr.', 'Mrs.', 'Miss', 'Ms.'] as const; diff --git a/stories/demos/components/Editors/SelectEditor.tsx b/stories/demos/components/Editors/SelectEditor.tsx index dc1d9391e0..60be946117 100644 --- a/stories/demos/components/Editors/SelectEditor.tsx +++ b/stories/demos/components/Editors/SelectEditor.tsx @@ -1,5 +1,6 @@ import React from 'react'; -import Select, { OptionTypeBase, OptionsType } from 'react-select'; +import Select from 'react-select'; +import type { OptionTypeBase, OptionsType } from 'react-select'; interface SelectEditorProps { value: string; diff --git a/stories/demos/components/Filters/NumericFilter.tsx b/stories/demos/components/Filters/NumericFilter.tsx index e2891dd736..a889b90490 100644 --- a/stories/demos/components/Filters/NumericFilter.tsx +++ b/stories/demos/components/Filters/NumericFilter.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Column, FilterRendererProps } from '../../../../src'; +import type { Column, FilterRendererProps } from '../../../../src'; enum RuleType { number = 1, diff --git a/stories/demos/components/Formatters/CellActionsFormatter.tsx b/stories/demos/components/Formatters/CellActionsFormatter.tsx index ec40629294..2e230a1bde 100644 --- a/stories/demos/components/Formatters/CellActionsFormatter.tsx +++ b/stories/demos/components/Formatters/CellActionsFormatter.tsx @@ -1,4 +1,5 @@ -import React, { useState, ReactNode } from 'react'; +import React, { useState } from 'react'; +import type { ReactNode } from 'react'; import clsx from 'clsx'; import { usePopper } from 'react-popper'; import { createPortal } from 'react-dom'; diff --git a/stories/demos/components/HeaderRenderers/DraggableHeaderRenderer.tsx b/stories/demos/components/HeaderRenderers/DraggableHeaderRenderer.tsx index e44a7f3051..6035b2d9ec 100644 --- a/stories/demos/components/HeaderRenderers/DraggableHeaderRenderer.tsx +++ b/stories/demos/components/HeaderRenderers/DraggableHeaderRenderer.tsx @@ -1,7 +1,9 @@ import React from 'react'; -import { useDrag, useDrop, DragObjectWithType } from 'react-dnd'; +import { useDrag, useDrop } from 'react-dnd'; +import type { DragObjectWithType } from 'react-dnd'; -import { HeaderRendererProps, SortableHeaderCell } from '../../../../src'; +import { SortableHeaderCell } from '../../../../src'; +import type { HeaderRendererProps } from '../../../../src'; import { useCombinedRefs } from '../../../../src/hooks'; interface ColumnDragObject extends DragObjectWithType { diff --git a/stories/demos/components/RowRenderers/DraggableRowRenderer.tsx b/stories/demos/components/RowRenderers/DraggableRowRenderer.tsx index 3858e1a402..7a969b9e62 100644 --- a/stories/demos/components/RowRenderers/DraggableRowRenderer.tsx +++ b/stories/demos/components/RowRenderers/DraggableRowRenderer.tsx @@ -1,8 +1,10 @@ import React from 'react'; -import { useDrag, useDrop, DragObjectWithType } from 'react-dnd'; +import { useDrag, useDrop } from 'react-dnd'; +import type { DragObjectWithType } from 'react-dnd'; import clsx from 'clsx'; -import { Row, RowRendererProps } from '../../../../src'; +import { Row } from '../../../../src'; +import type { RowRendererProps } from '../../../../src'; import { useCombinedRefs } from '../../../../src/hooks'; import './DraggableRowRenderer.less'; diff --git a/test/column/cellClass.test.ts b/test/column/cellClass.test.ts index 082104d1d2..1f5fa10a44 100644 --- a/test/column/cellClass.test.ts +++ b/test/column/cellClass.test.ts @@ -1,4 +1,4 @@ -import { Column } from '../../src'; +import type { Column } from '../../src'; import { setup, getCells } from '../utils'; interface Row { diff --git a/test/column/formatter.test.tsx b/test/column/formatter.test.tsx index 5517cef04c..e671450b79 100644 --- a/test/column/formatter.test.tsx +++ b/test/column/formatter.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Column } from '../../src'; +import type { Column } from '../../src'; import { setup, getCells } from '../utils'; interface Row { diff --git a/test/rowClass.test.ts b/test/rowClass.test.ts index bcae3525ae..d00f0d8bac 100644 --- a/test/rowClass.test.ts +++ b/test/rowClass.test.ts @@ -1,4 +1,4 @@ -import { Column } from '../src'; +import type { Column } from '../src'; import { setup, getRows } from './utils'; interface Row { diff --git a/test/utils.tsx b/test/utils.tsx index 9b17820dd7..a588989f3f 100644 --- a/test/utils.tsx +++ b/test/utils.tsx @@ -1,6 +1,7 @@ import React, { StrictMode } from 'react'; import { render, screen } from '@testing-library/react'; -import DataGrid, { DataGridProps } from '../src/'; +import DataGrid from '../src/'; +import type { DataGridProps } from '../src/'; export function setup(props: DataGridProps) { return render( diff --git a/tsconfig.all.json b/tsconfig.all.json index d64b24ba3f..bd33ea9f75 100644 --- a/tsconfig.all.json +++ b/tsconfig.all.json @@ -1,6 +1,7 @@ { "extends": "./tsconfig.json", "compilerOptions": { + "emitDeclarationOnly": false, "noEmit": true }, "include": [ diff --git a/tsconfig.eslint.json b/tsconfig.eslint.json index d6e21ce137..a1ae0a5c3b 100644 --- a/tsconfig.eslint.json +++ b/tsconfig.eslint.json @@ -1,6 +1,7 @@ { "extends": "./tsconfig.json", "include": [ + "jest.config.mjs", "rollup.config.mjs", "src/**/*", "stories/**/*", diff --git a/tsconfig.json b/tsconfig.json index 0bb9d0da52..cb55078461 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -2,9 +2,10 @@ "compilerOptions": { "allowSyntheticDefaultImports": true, "declaration": true, + "emitDeclarationOnly": true, "forceConsistentCasingInFileNames": true, - "inlineSources": true, - "jsx": "react", + "isolatedModules": true, + "jsx": "preserve", "lib": ["esnext", "dom", "dom.iterable"], "module": "esnext", "moduleResolution": "node", @@ -12,9 +13,8 @@ "noUnusedLocals": true, "outDir": "lib", "pretty": true, - "sourceMap": true, "strict": true, - "target": "es2019", + "target": "esnext", "types": ["jest", "@testing-library/jest-dom"] }, "files": [