From 38bfb21e1ccaf7a9afaa61c0a513943a9d2526c4 Mon Sep 17 00:00:00 2001 From: Nicolas Stepien Date: Sat, 7 Nov 2020 16:59:42 +0000 Subject: [PATCH 1/7] Publish bundles instead of modules, use babel only for transpilation --- .eslintrc.js | 2 +- .github/workflows/ci.yml | 2 ++ .storybook/webpack.config.js | 3 --- README.md | 1 - babel.config.json | 10 +++++++-- package.json | 16 +++++++------- rollup.config.mjs | 21 +++++++++++-------- src/Cell.tsx | 2 +- src/Columns.tsx | 2 +- src/DataGrid.tsx | 4 ++-- src/EditCell.tsx | 2 +- src/FilterRow.tsx | 4 ++-- src/GroupCell.tsx | 4 ++-- src/GroupRow.tsx | 2 +- src/HeaderCell.tsx | 6 +++--- src/HeaderRow.tsx | 4 ++-- src/Row.tsx | 2 +- src/SummaryCell.tsx | 2 +- src/SummaryRow.tsx | 2 +- src/editors/EditorContainer.tsx | 2 +- src/editors/TextEditor.tsx | 2 +- src/formatters/ToggleGroupFormatter.tsx | 2 +- src/formatters/ValueFormatter.tsx | 2 +- src/headerCells/ResizableHeaderCell.tsx | 2 +- src/headerCells/SortableHeaderCell.tsx | 4 ++-- src/hooks/useViewportColumns.ts | 4 ++-- src/hooks/useViewportRows.ts | 2 +- src/index.ts | 10 ++++++--- src/types.ts | 2 +- src/utils/columnUtils.ts | 2 +- src/utils/selectedCellUtils.ts | 4 ++-- stories/demos/AllFeatures.tsx | 3 ++- stories/demos/CellActions.tsx | 3 ++- stories/demos/CellNavigation.tsx | 3 ++- stories/demos/ColumnsReordering.tsx | 3 ++- stories/demos/CommonFeatures.tsx | 3 ++- stories/demos/ContextMenu.tsx | 3 ++- stories/demos/Grouping.tsx | 6 ++++-- stories/demos/HeaderFilters.tsx | 3 ++- stories/demos/MillionCells.tsx | 3 ++- stories/demos/NoRows.tsx | 3 ++- stories/demos/Resizable.tsx | 3 ++- stories/demos/RowsReordering.tsx | 3 ++- stories/demos/ScrollToRow.tsx | 3 ++- stories/demos/TreeView.tsx | 3 ++- .../components/Editors/DropDownEditor.tsx | 4 ++-- .../demos/components/Editors/SelectEditor.tsx | 3 ++- .../components/Filters/NumericFilter.tsx | 2 +- .../Formatters/CellActionsFormatter.tsx | 3 ++- .../DraggableHeaderRenderer.tsx | 6 ++++-- .../RowRenderers/DraggableRowRenderer.tsx | 6 ++++-- test/column/cellClass.test.ts | 2 +- test/column/formatter.test.tsx | 2 +- test/rowClass.test.ts | 2 +- test/utils.tsx | 3 ++- tsconfig.all.json | 1 + tsconfig.json | 8 +++---- 57 files changed, 125 insertions(+), 91 deletions(-) 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..f7df484773 100644 --- a/babel.config.json +++ b/babel.config.json @@ -4,8 +4,14 @@ "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/package.json b/package.json index 2df941b006..aec5be1539 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,7 @@ "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..ee29a10236 100644 --- a/rollup.config.mjs +++ b/rollup.config.mjs @@ -1,8 +1,11 @@ +import { isAbsolute } from 'path'; import nodeResolve from '@rollup/plugin-node-resolve'; -import sourcemaps from 'rollup-plugin-sourcemaps'; +import { babel } from '@rollup/plugin-babel'; + +const extensions = ['.ts', '.tsx']; export default { - input: './lib/index.js', + input: './src/index.ts', output: [{ file: './lib/bundle.mjs', format: 'es', @@ -15,13 +18,13 @@ export default { sourcemap: true, interop: false }], - external: [ - 'clsx', - 'react', - 'react-dom' - ], + external: id => !id.startsWith('.') && !isAbsolute(id), plugins: [ - sourcemaps(), - nodeResolve() + babel({ + babelHelpers: 'runtime', + skipPreflightCheck: true, + extensions + }), + nodeResolve({ extensions }) ] }; diff --git a/src/Cell.tsx b/src/Cell.tsx index 934e3164d7..213a558d28 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 c461f3d13e..d0fd268f4b 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 e4096eae73..de70f59775 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 c059ee0666..8f197f0bcb 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 11a9da7d49..e7c0503936 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 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 dbaa62a5a2..25e8c50847 100644 --- a/src/hooks/useViewportColumns.ts +++ b/src/hooks/useViewportColumns.ts @@ -1,8 +1,8 @@ import { useMemo } from 'react'; -import { CalculatedColumn, Column } from '../types'; +import type { CalculatedColumn, Column } from '../types'; import { getColumnMetrics } from '../utils'; -import { DataGridProps } from '../DataGrid'; +import type { DataGridProps } from '../DataGrid'; import { ValueFormatter } from '../formatters'; type SharedDataGridProps = Pick, 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 e2717b6ab6..b7dc893924 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,5 +1,5 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -import { SortDirection } from './enums'; +import type { SortDirection } from './enums'; export type Omit = Pick>; diff --git a/src/utils/columnUtils.ts b/src/utils/columnUtils.ts index 283fbde179..c1e8d0a3fc 100644 --- a/src/utils/columnUtils.ts +++ b/src/utils/columnUtils.ts @@ -1,4 +1,4 @@ -import { Column, CalculatedColumn, FormatterProps } from '../types'; +import type { Column, CalculatedColumn, FormatterProps } from '../types'; import { ToggleGroupFormatter } from '../formatters'; import { SELECT_COLUMN_KEY } from '../Columns'; 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 e6dd613bcd..cdfdaecb05 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 } from '../../src'; +import DataGrid, { SelectColumn, TextEditor } from '../../src'; +import type { Column, SortDirection } from '../../src'; import { SelectEditor } from './components/Editors/SelectEditor'; const dateFormatter = new Intl.DateTimeFormat(navigator.language); 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.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": [ From 5985acc70380987381dea0ed6a72e3520f9ea36a Mon Sep 17 00:00:00 2001 From: Nicolas Stepien Date: Sat, 7 Nov 2020 17:16:34 +0000 Subject: [PATCH 2/7] Fix jest --- jest.config.mjs | 8 -------- package.json | 1 - tsconfig.eslint.json | 1 + 3 files changed, 1 insertion(+), 9 deletions(-) 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 aec5be1539..cdaa6ca901 100644 --- a/package.json +++ b/package.json @@ -99,7 +99,6 @@ "react-select": "^3.1.0", "react-sortable-hoc": "^1.11.0", "rollup": "^2.32.1", - "ts-jest": "^26.4.3", "typescript": "~4.0.5" }, "peerDependencies": { 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/**/*", From 5850ca72071aade7cdebafee8cdcfcfe2e7d40a5 Mon Sep 17 00:00:00 2001 From: Nicolas Stepien Date: Sat, 7 Nov 2020 17:43:56 +0000 Subject: [PATCH 3/7] ocd --- rollup.config.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/rollup.config.mjs b/rollup.config.mjs index ee29a10236..1cc514ecb4 100644 --- a/rollup.config.mjs +++ b/rollup.config.mjs @@ -1,6 +1,6 @@ import { isAbsolute } from 'path'; -import nodeResolve from '@rollup/plugin-node-resolve'; import { babel } from '@rollup/plugin-babel'; +import nodeResolve from '@rollup/plugin-node-resolve'; const extensions = ['.ts', '.tsx']; From e0115ace0ebebb84da47b1e85deceb1f4371c38e Mon Sep 17 00:00:00 2001 From: Nicolas Stepien Date: Sat, 7 Nov 2020 18:32:15 +0000 Subject: [PATCH 4/7] Strip comments from bundles --- rollup.config.mjs | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/rollup.config.mjs b/rollup.config.mjs index 1cc514ecb4..6cc5694803 100644 --- a/rollup.config.mjs +++ b/rollup.config.mjs @@ -23,7 +23,11 @@ export default { babel({ babelHelpers: 'runtime', skipPreflightCheck: true, - extensions + 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 }) ] From 3eda9acdb101a618478d25429ef717115fcd48b7 Mon Sep 17 00:00:00 2001 From: Nicolas Stepien Date: Sat, 7 Nov 2020 22:42:44 +0000 Subject: [PATCH 5/7] preset-env: enable loose transformation --- babel.config.json | 1 + 1 file changed, 1 insertion(+) diff --git a/babel.config.json b/babel.config.json index f7df484773..da0703e730 100644 --- a/babel.config.json +++ b/babel.config.json @@ -1,6 +1,7 @@ { "presets": [ ["@babel/env", { + "loose": true, "bugfixes": true, "shippedProposals": true, "corejs": 3, From ae3b3584a8ee0806ecc33e0c866510a49b9f0d89 Mon Sep 17 00:00:00 2001 From: Nicolas Stepien Date: Mon, 9 Nov 2020 16:19:24 +0000 Subject: [PATCH 6/7] Fix lint --- src/headerCells/ResizableHeaderCell.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/headerCells/ResizableHeaderCell.tsx b/src/headerCells/ResizableHeaderCell.tsx index f72cab251b..5e02095d8c 100644 --- a/src/headerCells/ResizableHeaderCell.tsx +++ b/src/headerCells/ResizableHeaderCell.tsx @@ -1,4 +1,4 @@ -import React, { cloneElement } from 'react'; +import { cloneElement } from 'react'; import type { CalculatedColumn } from '../types'; interface ResizableHeaderCellProps { From eec804d7df4436b8ea0bf276ce0d3de4e93da859 Mon Sep 17 00:00:00 2001 From: Nicolas Stepien Date: Mon, 9 Nov 2020 20:15:20 +0000 Subject: [PATCH 7/7] rm skipPreflightCheck --- rollup.config.mjs | 1 - 1 file changed, 1 deletion(-) diff --git a/rollup.config.mjs b/rollup.config.mjs index 6cc5694803..57e4ee519c 100644 --- a/rollup.config.mjs +++ b/rollup.config.mjs @@ -22,7 +22,6 @@ export default { plugins: [ babel({ babelHelpers: 'runtime', - skipPreflightCheck: true, extensions, // remove all comments except terser annotations // https://github.com/terser/terser#annotations