fix: remove react star import

Fixes #814
petyosi · Jan 4, 2023 · 2103a33 · 2103a33
1 parent f61e769
commit 2103a33
Show file tree

Hide file tree

Showing 11 changed files with 62 additions and 47 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -8,6 +8,7 @@ module.exports = {
  plugins: ['@typescript-eslint', 'json', 'html'],
  extends: [
  'plugin:react/recommended',
+ 'plugin:react/jsx-runtime',
  'plugin:@typescript-eslint/recommended',
  'plugin:@typescript-eslint/recommended-requiring-type-checking',
  'prettier',

diff --git a/src/TableVirtuoso.tsx b/src/TableVirtuoso.tsx
@@ -1,7 +1,6 @@
 import { systemToComponent } from './react-urx'
 import * as u from './urx'
-import * as React from 'react'
-import { createElement, FC, PropsWithChildren, ReactElement, Ref, useContext } from 'react'
+import { createElement, FC, PropsWithChildren, ReactElement, Ref, useContext, memo, useState, useEffect } from 'react'
 import useChangedListContentsSizes from './hooks/useChangedChildSizes'
 import { ComputeItemKey, ItemContent, FixedHeaderContent, FixedFooterContent, TableComponents, TableRootProps } from './interfaces'
 import { listSystem } from './listSystem'
@@ -71,7 +70,7 @@ const DefaultFillerRow = ({ height }: { height: number }) => (
  </tr>
 )
 
-const Items = /*#__PURE__*/ React.memo(function VirtuosoItems() {
+const Items = /*#__PURE__*/ memo(function VirtuosoItems() {
  const listState = useEmitterValue('listState')
  const sizeRanges = usePublisher('sizeRanges')
  const useWindowScroll = useEmitterValue('useWindowScroll')
@@ -95,7 +94,7 @@ const Items = /*#__PURE__*/ React.memo(function VirtuosoItems() {
  customScrollParent
  )
 
- const [deviation, setDeviation] = React.useState(0)
+ const [deviation, setDeviation] = useState(0)
  useEmitter('deviation', (value) => {
  if (deviation !== value) {
  ref.current!.style.marginTop = `${value}px`
@@ -166,7 +165,7 @@ const Viewport: FC<PropsWithChildren<unknown>> = ({ children }) => {
  const fixedItemHeight = usePublisher('fixedItemHeight')
  const viewportRef = useSize(u.compose(viewportHeight, (el) => correctItemSize(el, 'height')))
 
- React.useEffect(() => {
+ useEffect(() => {
  if (ctx) {
  viewportHeight(ctx.viewportHeight)
  fixedItemHeight(ctx.itemHeight)
@@ -187,7 +186,7 @@ const WindowViewport: FC<PropsWithChildren<unknown>> = ({ children }) => {
  const customScrollParent = useEmitterValue('customScrollParent')
  const viewportRef = useWindowViewportRectRef(windowViewportRect, customScrollParent)
 
- React.useEffect(() => {
+ useEffect(() => {
  if (ctx) {
  fixedItemHeight(ctx.itemHeight)
  windowViewportRect({ offsetTop: 0, visibleHeight: ctx.viewportHeight, visibleWidth: 100 })
@@ -201,7 +200,7 @@ const WindowViewport: FC<PropsWithChildren<unknown>> = ({ children }) => {
  )
 }
 
-const TableRoot: FC<TableRootProps> = /*#__PURE__*/ React.memo(function TableVirtuosoRoot(props) {
+const TableRoot: FC<TableRootProps> = /*#__PURE__*/ memo(function TableVirtuosoRoot(props) {
  const useWindowScroll = useEmitterValue('useWindowScroll')
  const customScrollParent = useEmitterValue('customScrollParent')
  const fixedHeaderHeight = usePublisher('fixedHeaderHeight')
@@ -218,7 +217,7 @@ const TableRoot: FC<TableRootProps> = /*#__PURE__*/ React.memo(function TableVir
  const TheTFoot = useEmitterValue('TableFooterComponent')
 
  const theHead = fixedHeaderContent
- ? React.createElement(
+ ? createElement(
  TheTHead!,
  {
  key: 'TableHead',
@@ -230,7 +229,7 @@ const TableRoot: FC<TableRootProps> = /*#__PURE__*/ React.memo(function TableVir
  )
  : null
  const theFoot = fixedFooterContent
- ? React.createElement(
+ ? createElement(
  TheTFoot!,
  {
  key: 'TableFoot',
@@ -245,7 +244,7 @@ const TableRoot: FC<TableRootProps> = /*#__PURE__*/ React.memo(function TableVir
  return (
  <TheScroller {...props}>
  <TheViewport>
- {React.createElement(TheTable!, { style: { borderSpacing: 0 }, ...contextPropIfNotDomElement(TheTable, context) }, [
+ {createElement(TheTable!, { style: { borderSpacing: 0 }, ...contextPropIfNotDomElement(TheTable, context) }, [
  theHead,
  <Items key="TableBody" />,
  theFoot,

diff --git a/src/Virtuoso.tsx b/src/Virtuoso.tsx
@@ -1,7 +1,19 @@
 import { systemToComponent } from './react-urx'
 import * as u from './urx'
-import * as React from 'react'
-import { ComponentType, createElement, CSSProperties, FC, PropsWithChildren, useContext, ReactElement, Ref } from 'react'
+import {
+ ComponentType,
+ createElement,
+ CSSProperties,
+ FC,
+ PropsWithChildren,
+ useContext,
+ ReactElement,
+ Ref,
+ memo,
+ useState,
+ useEffect,
+ MutableRefObject,
+} from 'react'
 import useIsomorphicLayoutEffect from './hooks/useIsomorphicLayoutEffect'
 import useChangedListContentsSizes from './hooks/useChangedChildSizes'
 import useScrollTop from './hooks/useScrollTop'
@@ -68,7 +80,7 @@ const DefaultScrollSeekPlaceholder = ({ height }: { height: number }) => <div st
 const GROUP_STYLE = { position: positionStickyCssValue(), zIndex: 1, overflowAnchor: 'none' } as const
 const ITEM_STYLE = { overflowAnchor: 'none' } as const
 
-const Items = /*#__PURE__*/ React.memo(function VirtuosoItems({ showTopList = false }: { showTopList?: boolean }) {
+const Items = /*#__PURE__*/ memo(function VirtuosoItems({ showTopList = false }: { showTopList?: boolean }) {
  const listState = useEmitterValue('listState')
 
  const sizeRanges = usePublisher('sizeRanges')
@@ -96,7 +108,7 @@ const Items = /*#__PURE__*/ React.memo(function VirtuosoItems({ showTopList = fa
  customScrollParent
  )
 
- const [deviation, setDeviation] = React.useState(0)
+ const [deviation, setDeviation] = useState(0)
  useEmitter('deviation', (value) => {
  if (deviation !== value) {
  // ref.current!.style.marginTop = `${value}px`
@@ -214,7 +226,7 @@ export function contextPropIfNotDomElement(element: unknown, context: unknown) {
  return { context }
 }
 
-const Header: FC = /*#__PURE__*/ React.memo(function VirtuosoHeader() {
+const Header: FC = /*#__PURE__*/ memo(function VirtuosoHeader() {
  const Header = useEmitterValue('HeaderComponent')
  const headerHeight = usePublisher('headerHeight')
  const headerFooterTag = useEmitterValue('headerFooterTag')
@@ -223,7 +235,7 @@ const Header: FC = /*#__PURE__*/ React.memo(function VirtuosoHeader() {
  return Header ? createElement(headerFooterTag, { ref }, createElement(Header, contextPropIfNotDomElement(Header, context))) : null
 })
 
-const Footer: FC = /*#__PURE__*/ React.memo(function VirtuosoFooter() {
+const Footer: FC = /*#__PURE__*/ memo(function VirtuosoFooter() {
  const Footer = useEmitterValue('FooterComponent')
  const footerHeight = usePublisher('footerHeight')
  const headerFooterTag = useEmitterValue('headerFooterTag')
@@ -239,7 +251,7 @@ interface Hooks {
 }
 
 export function buildScroller({ usePublisher, useEmitter, useEmitterValue }: Hooks) {
- const Scroller: ComponentType<ScrollerProps> = React.memo(function VirtuosoScroller({ style, children, ...props }) {
+ const Scroller: ComponentType<ScrollerProps> = memo(function VirtuosoScroller({ style, children, ...props }) {
  const scrollContainerStateCallback = usePublisher('scrollContainerState')
  const ScrollerComponent = useEmitterValue('ScrollerComponent')!
  const smoothScrollTargetReached = usePublisher('smoothScrollTargetReached')
@@ -258,7 +270,7 @@ export function buildScroller({ usePublisher, useEmitter, useEmitterValue }: Hoo
  return createElement(
  ScrollerComponent,
  {
- ref: scrollerRef as React.MutableRefObject<HTMLDivElement | null>,
+ ref: scrollerRef as MutableRefObject<HTMLDivElement | null>,
  style: { ...scrollerStyle, ...style },
  'data-test-id': 'virtuoso-scroller',
  'data-virtuoso-scroller': true,
@@ -273,7 +285,7 @@ export function buildScroller({ usePublisher, useEmitter, useEmitterValue }: Hoo
 }
 
 export function buildWindowScroller({ usePublisher, useEmitter, useEmitterValue }: Hooks) {
- const Scroller: Components['Scroller'] = React.memo(function VirtuosoWindowScroller({ style, children, ...props }) {
+ const Scroller: Components['Scroller'] = memo(function VirtuosoWindowScroller({ style, children, ...props }) {
  const scrollContainerStateCallback = usePublisher('windowScrollContainerState')
  const ScrollerComponent = useEmitterValue('ScrollerComponent')!
  const smoothScrollTargetReached = usePublisher('smoothScrollTargetReached')
@@ -318,7 +330,7 @@ const Viewport: FC<PropsWithChildren<unknown>> = ({ children }) => {
  const fixedItemHeight = usePublisher('fixedItemHeight')
  const viewportRef = useSize(u.compose(viewportHeight, (el) => correctItemSize(el, 'height')))
 
- React.useEffect(() => {
+ useEffect(() => {
  if (ctx) {
  viewportHeight(ctx.viewportHeight)
  fixedItemHeight(ctx.itemHeight)
@@ -339,7 +351,7 @@ const WindowViewport: FC<PropsWithChildren<unknown>> = ({ children }) => {
  const customScrollParent = useEmitterValue('customScrollParent')
  const viewportRef = useWindowViewportRectRef(windowViewportRect, customScrollParent)
 
- React.useEffect(() => {
+ useEffect(() => {
  if (ctx) {
  fixedItemHeight(ctx.itemHeight)
  windowViewportRect({ offsetTop: 0, visibleHeight: ctx.viewportHeight, visibleWidth: 100 })
@@ -361,7 +373,7 @@ const TopItemListContainer: FC<PropsWithChildren<unknown>> = ({ children }) => {
  return createElement(TopItemList || 'div', { style, context }, children)
 }
 
-const ListRoot: FC<ListRootProps> = /*#__PURE__*/ React.memo(function VirtuosoRoot(props) {
+const ListRoot: FC<ListRootProps> = /*#__PURE__*/ memo(function VirtuosoRoot(props) {
  const useWindowScroll = useEmitterValue('useWindowScroll')
  const showTopList = useEmitterValue('topItemsIndexes').length > 0
  const customScrollParent = useEmitterValue('customScrollParent')

diff --git a/src/VirtuosoGrid.tsx b/src/VirtuosoGrid.tsx
@@ -1,8 +1,7 @@
 import { RefHandle, systemToComponent } from './react-urx'
 
 import * as u from './urx'
-import * as React from 'react'
-import { createElement, FC, PropsWithChildren, ReactElement, Ref, useContext } from 'react'
+import { memo, createElement, FC, PropsWithChildren, ReactElement, Ref, useContext, useEffect } from 'react'
 import { gridSystem } from './gridSystem'
 import useSize from './hooks/useSize'
 import useWindowViewportRectRef from './hooks/useWindowViewportRect'
@@ -56,7 +55,7 @@ const combinedSystem = /*#__PURE__*/ u.system(([gridSystem, gridComponentPropsSy
  return { ...gridSystem, ...gridComponentPropsSystem }
 }, u.tup(gridSystem, gridComponentPropsSystem))
 
-const GridItems: FC = /*#__PURE__*/ React.memo(function GridItems() {
+const GridItems: FC = /*#__PURE__*/ memo(function GridItems() {
  const gridState = useEmitterValue('gridState')
  const listClassName = useEmitterValue('listClassName')
  const itemClassName = useEmitterValue('itemClassName')
@@ -113,7 +112,7 @@ const GridItems: FC = /*#__PURE__*/ React.memo(function GridItems() {
  )
 })
 
-const Header: FC = React.memo(function VirtuosoHeader() {
+const Header: FC = memo(function VirtuosoHeader() {
  const Header = useEmitterValue('HeaderComponent')
  const headerHeight = usePublisher('headerHeight')
  const headerFooterTag = useEmitterValue('headerFooterTag')
@@ -122,7 +121,7 @@ const Header: FC = React.memo(function VirtuosoHeader() {
  return Header ? createElement(headerFooterTag, { ref }, createElement(Header, contextPropIfNotDomElement(Header, context))) : null
 })
 
-const Footer: FC = React.memo(function VirtuosoGridFooter() {
+const Footer: FC = memo(function VirtuosoGridFooter() {
  const Footer = useEmitterValue('FooterComponent')
  const footerHeight = usePublisher('footerHeight')
  const headerFooterTag = useEmitterValue('headerFooterTag')
@@ -140,7 +139,7 @@ const Viewport: FC<PropsWithChildren<unknown>> = ({ children }) => {
  viewportDimensions(el.getBoundingClientRect())
  })
 
- React.useEffect(() => {
+ useEffect(() => {
  if (ctx) {
  viewportDimensions({ height: ctx.viewportHeight, width: ctx.viewportWidth })
  itemDimensions({ height: ctx.itemHeight, width: ctx.itemWidth })
@@ -161,7 +160,7 @@ const WindowViewport: FC<PropsWithChildren<unknown>> = ({ children }) => {
  const customScrollParent = useEmitterValue('customScrollParent')
  const viewportRef = useWindowViewportRectRef(windowViewportRect, customScrollParent)
 
- React.useEffect(() => {
+ useEffect(() => {
  if (ctx) {
  itemDimensions({ height: ctx.itemHeight, width: ctx.itemWidth })
  windowViewportRect({ offsetTop: 0, visibleHeight: ctx.viewportHeight, visibleWidth: ctx.viewportWidth })
@@ -175,7 +174,7 @@ const WindowViewport: FC<PropsWithChildren<unknown>> = ({ children }) => {
  )
 }
 
-const GridRoot: FC<GridRootProps> = /*#__PURE__*/ React.memo(function GridRoot({ ...props }) {
+const GridRoot: FC<GridRootProps> = /*#__PURE__*/ memo(function GridRoot({ ...props }) {
  const useWindowScroll = useEmitterValue('useWindowScroll')
  const customScrollParent = useEmitterValue('customScrollParent')
  const TheScroller = customScrollParent || useWindowScroll ? WindowScroller : Scroller

diff --git a/src/interfaces.ts b/src/interfaces.ts
@@ -1,4 +1,4 @@
-import React, { ComponentPropsWithRef, ComponentType, Key, ReactNode } from 'react'
+import { ComponentPropsWithRef, ComponentType, Key, ReactNode, HTMLProps } from 'react'
 export interface ListRange {
  startIndex: number
  endIndex: number
@@ -8,9 +8,9 @@ export interface ItemContent<D, C> {
  (index: number, data: D, context: C): ReactNode
 }
 
-export type FixedHeaderContent = (() => React.ReactNode) | null
+export type FixedHeaderContent = (() => ReactNode) | null
 
-export type FixedFooterContent = (() => React.ReactNode) | null
+export type FixedFooterContent = (() => ReactNode) | null
 export interface GroupItemContent<D, C> {
  (index: number, groupIndex: number, data: D, context: C): ReactNode
 }
@@ -266,9 +266,9 @@ export interface GroupIndexLocationWithAlign extends LocationOptions {
 
 export type IndexLocationWithAlign = FlatIndexLocationWithAlign | GroupIndexLocationWithAlign
 
-export type ListRootProps = Omit<React.HTMLProps<HTMLDivElement>, 'ref' | 'data'>
-export type TableRootProps = Omit<React.HTMLProps<HTMLTableElement>, 'ref' | 'data'>
-export type GridRootProps = Omit<React.HTMLProps<HTMLDivElement>, 'ref' | 'data'>
+export type ListRootProps = Omit<HTMLProps<HTMLDivElement>, 'ref' | 'data'>
+export type TableRootProps = Omit<HTMLProps<HTMLTableElement>, 'ref' | 'data'>
+export type GridRootProps = Omit<HTMLProps<HTMLDivElement>, 'ref' | 'data'>
 
 export interface GridItem<D> {
  index: number

diff --git a/src/react-urx/index.ts b/src/react-urx/index.ts
@@ -30,7 +30,6 @@
  *
  * @packageDocumentation
  */
-import * as React from 'react'
 import {
  ComponentType,
  createContext,
@@ -43,6 +42,8 @@ import {
  useImperativeHandle,
  useState,
  useCallback,
+ useEffect,
+ useLayoutEffect,
 } from 'react'
 import * as u from '../urx'
 import type { Emitter, Publisher, AnySystemSpec, SR, Stream, StatefulStream } from '../urx'
@@ -73,7 +74,7 @@ function omit<O extends Dict<any>, K extends readonly string[]>(keys: K, obj: O)
  return result as Omit<O, K[number]>
 }
 
-const useIsomorphicLayoutEffect = typeof document !== 'undefined' ? React.useLayoutEffect : React.useEffect
+const useIsomorphicLayoutEffect = typeof document !== 'undefined' ? useLayoutEffect : useEffect
 
 /** @internal */
 export type Observable<T> = Emitter<T> | Publisher<T>
@@ -265,9 +266,7 @@ export function systemToComponent<SS extends AnySystemSpec, M extends SystemProp
  })
 
  const usePublisher = <K extends keyof S>(key: K) => {
- return useCallback(u.curry2to1(u.publish, React.useContext(Context)[key]), [key]) as (
- value: S[K] extends Stream<infer R> ? R : never
- ) => void
+ return useCallback(u.curry2to1(u.publish, useContext(Context)[key]), [key]) as (value: S[K] extends Stream<infer R> ? R : never) => void
  }
 
  /**

diff --git a/src/utils/context.ts b/src/utils/context.ts
@@ -1,11 +1,11 @@
-import * as React from 'react'
+import { createContext } from 'react'
 
 export interface VirtuosoMockContextValue {
  viewportHeight: number
  itemHeight: number
 }
 
-export const VirtuosoMockContext = React.createContext<VirtuosoMockContextValue | undefined>(undefined)
+export const VirtuosoMockContext = createContext<VirtuosoMockContextValue | undefined>(undefined)
 
 export interface VirtuosoGridMockContextValue {
  viewportHeight: number
@@ -14,4 +14,4 @@ export interface VirtuosoGridMockContextValue {
  itemWidth: number
 }
 
-export const VirtuosoGridMockContext = React.createContext<VirtuosoGridMockContextValue | undefined>(undefined)
+export const VirtuosoGridMockContext = createContext<VirtuosoGridMockContextValue | undefined>(undefined)
diff --git a/test/VirtuosoMockContext.test.tsx b/test/VirtuosoMockContext.test.tsx
@@ -1,5 +1,4 @@
 import { render } from '@testing-library/react'
-import * as React from 'react'
 import { Virtuoso, VirtuosoMockContext, TableVirtuoso, VirtuosoGrid, VirtuosoGridMockContext } from '../src'
 import { describe, it, expect } from 'vitest'
 

diff --git a/test/ssr.test.tsx b/test/ssr.test.tsx
@@ -4,7 +4,6 @@
 
 import ReactDOMServer from 'react-dom/server'
 import { JSDOM } from 'jsdom'
-import * as React from 'react'
 import { Virtuoso, GroupedVirtuoso } from '../src/Virtuoso'
 import { VirtuosoGrid } from '../src/VirtuosoGrid'
 import { describe, it, expect } from 'vitest'

diff --git a/test/tsconfig.json b/test/tsconfig.json
@@ -0,0 +1,7 @@
+{
+ "extends": "../tsconfig.json",
+ "include": ["./"],
+ "compilerOptions": {
+ "rootDir": "./"
+ }
+}
diff --git a/tsconfig.typecheck.json b/tsconfig.typecheck.json
@@ -2,7 +2,7 @@
  "extends": "./tsconfig.json",
  "include": ["src", "types", "e2e", "test"],
  "compilerOptions": {
- "jsx": "react",
+ "jsx": "react-jsx",
  "emitDeclarationOnly": false,
  "rootDir": "./"
  }