New linting rule to detect import issues

.eslintrc.js

@@ -1,7 +1,13 @@
 /* eslint-env node */
 
 module.exports = {
-  extends: ['plugin:prettier/recommended', 'prettier/@typescript-eslint', '@react-facet/eslint-config'],
+  extends: [
+    'plugin:prettier/recommended',
+    'prettier/@typescript-eslint',
+    '@react-facet/eslint-config',
+    'plugin:import/recommended',
+    'plugin:import/typescript',
+  ],
   plugins: ['react', 'require-in-package', 'react-hooks', 'prettier'],
 
   root: true,
@@ -19,6 +25,7 @@ module.exports = {
   },
 
   rules: {
+    'import/no-cycle': 'error',
     'no-unreachable': 'error',
     'no-undef': 'error',
     'react-hooks/rules-of-hooks': 'error',
@@ -28,6 +35,14 @@ module.exports = {
     'require-in-package/require-in-package': 2,
   },
 
+  settings: {
+    'import/extensions': ['.ts', '.tsx'],
+    'import/resolver': {
+      typescript: true,
+      node: true,
+    },
+  },
+
   overrides: [
     {
       files: ['./**/*.{ts,tsx}'],

examples/benchmarking/compare.ts

@@ -21,6 +21,8 @@ const compare = async (optionA: string, optionB: string, targetRelativePerforman
     process.exit(1)
   }
 
+  // Puppeteer doesn't really have a `launch` named export.
+  // eslint-disable-next-line import/no-named-as-default-member
   const browser = await puppeteer.launch()
 
   interface TraceEvent {

examples/benchmarking/src/listMemoState.tsx

@@ -1,5 +1,5 @@
 import { render } from 'react-dom'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, memo } from 'react'
 
 interface Data {
   name: string
@@ -41,7 +41,7 @@ export const Performance = () => {
   )
 }
 
-const ListItem = React.memo(({ health, name }: Data) => {
+const ListItem = memo(({ health, name }: Data) => {
   useEffect(() => {
     randomWork(health)
   }, [health])

jest.setupTestFrameworkScriptFile.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-named-as-default-member */
 // eslint-disable-next-line require-in-package/require-in-package
 import React from 'react'
 import '@testing-library/jest-dom/extend-expect'

package.json

@@ -25,12 +25,14 @@
     "@types/glob": "^7",
     "@types/prettier": "^2",
     "@typescript-eslint/eslint-plugin": "^4.22.0",
-    "@typescript-eslint/parser": "^4.22.0",
+    "@typescript-eslint/parser": "^5.45.1",
     "babel-jest": "^26.0.1",
     "chalk": "^4.1.2",
     "cross-env": "^7.0.3",
     "eslint": "^7.25.0",
     "eslint-config-prettier": "^6.11.0",
+    "eslint-import-resolver-typescript": "^3.5.2",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.23.2",
     "eslint-plugin-react-hooks": "^4.1.1",

packages/@react-facet/core/src/components/Map.tsx

@@ -1,5 +1,7 @@
 import React, { ReactElement } from 'react'
-import { useFacetMap, useFacetMemo, useFacetUnwrap } from '../hooks'
+import { useFacetMemo } from '../hooks/useFacetMemo'
+import { useFacetUnwrap } from '../hooks/useFacetUnwrap'
+import { useFacetMap } from '../hooks/useFacetMap'
 import { EqualityCheck, Facet, NO_VALUE } from '../types'
 
 export type MapProps<T> = {

packages/@react-facet/core/src/components/Mount.tsx

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react'
-import { useFacetUnwrap } from '../hooks'
+import { useFacetUnwrap } from '../hooks/useFacetUnwrap'
 import { Facet } from '../types'
 
 type MountProps = {

packages/@react-facet/core/src/components/With.tsx

@@ -1,5 +1,6 @@
 import { ReactElement } from 'react'
-import { useFacetMap, useFacetUnwrap } from '../hooks'
+import { useFacetUnwrap } from '../hooks/useFacetUnwrap'
+import { useFacetMap } from '../hooks/useFacetMap'
 import { Facet, NoValue } from '../types'
 
 type WithProps<T> = {

packages/@react-facet/core/src/facet/createStaticFacet.ts

@@ -1,4 +1,4 @@
-import { Facet } from '..'
+import { Facet } from '../types'
 /**
  * Creates a nonwritable barebones static facet to be used when you need an initial facet value outside the react context
  * that's meant to be replaced later by a real facet. Ex: with `createContext()`

packages/@react-facet/core/src/hooks/useFacetCallback.ts

@@ -1,6 +1,5 @@
 import { useCallback, useLayoutEffect, useRef } from 'react'
-import { NoValue } from '..'
-import { Facet, NO_VALUE, Option, ExtractFacetValues } from '../types'
+import { Facet, NO_VALUE, Option, ExtractFacetValues, NoValue } from '../types'
 
 /**
  * Creates a callback that depends on the value of a facet.

packages/@react-facet/core/src/hooks/useFacetRef.spec.tsx

@@ -1,12 +1,12 @@
-import React from 'react'
+import React, { createRef } from 'react'
 import { render } from '@react-facet/dom-fiber-testing-library'
 import { useFacetRef } from './useFacetRef'
 import { createFacet } from '../facet'
 import { NoValue, NO_VALUE } from '..'
 
 it('passes a value into the ref', () => {
   const mockFacet = createFacet({ initialValue: 'value' })
-  let ref: React.RefObject<string | NoValue> = React.createRef()
+  let ref: React.RefObject<string | NoValue> = createRef()
 
   const ComponentWithFacetEffect: React.FC = () => {
     ref = useFacetRef(mockFacet)
@@ -22,7 +22,7 @@ it('passes a value into the ref', () => {
 
 it('should default to no NO_VALUE', () => {
   const mockFacet = createFacet<string>({ initialValue: NO_VALUE })
-  let ref: React.RefObject<string | NoValue> = React.createRef()
+  let ref: React.RefObject<string | NoValue> = createRef()
 
   const ComponentWithFacetEffect: React.FC = () => {
     ref = useFacetRef(mockFacet)
@@ -38,7 +38,7 @@ it('should default to no NO_VALUE', () => {
 
 it('should be able to set a default value', () => {
   const mockFacet = createFacet<string>({ initialValue: NO_VALUE })
-  let ref: React.RefObject<string | NoValue> = React.createRef()
+  let ref: React.RefObject<string | NoValue> = createRef()
 
   const ComponentWithFacetEffect: React.FC = () => {
     ref = useFacetRef(mockFacet, 'fallback')
@@ -54,7 +54,7 @@ it('should be able to set a default value', () => {
 
 it('should ignore the default state if the facet has a value', () => {
   const mockFacet = createFacet<string>({ initialValue: 'initialValue' })
-  let ref: React.RefObject<string | NoValue> = React.createRef()
+  let ref: React.RefObject<string | NoValue> = createRef()
 
   const ComponentWithFacetEffect: React.FC = () => {
     ref = useFacetRef(mockFacet, 'fallback')

packages/@react-facet/core/src/hooks/useFacetRef.ts

@@ -1,7 +1,6 @@
 import { useRef, MutableRefObject } from 'react'
-import { Facet } from '../types'
 import { useFacetEffect } from './useFacetEffect'
-import { NO_VALUE, Option } from '..'
+import { NO_VALUE, Option, Facet } from '../types'
 
 export function useFacetRef<T>(facet: Facet<T>): MutableRefObject<Option<T>>
 export function useFacetRef<T>(facet: Facet<T>, defaultValue: T): MutableRefObject<T>

packages/@react-facet/core/src/hooks/useFacetUnwrap.ts

@@ -1,6 +1,5 @@
 import { useLayoutEffect, useState } from 'react'
-import { NoValue } from '..'
-import { FacetProp, isFacet, Value } from '../types'
+import { FacetProp, isFacet, Value, NoValue } from '../types'
 
 /**
  * Hook that allows consuming values from a Facet

packages/@react-facet/dom-fiber-testing-library/src/renderer.ts

@@ -238,5 +238,4 @@ const environment = setup()
 export const act = environment.act
 export const render = environment.render
 export const cleanup = environment.cleanup
-export const fireEvent = environment.fireEvent
 export * from '@testing-library/dom'

packages/@react-facet/dom-fiber/src/createReconciler.ts

@@ -1,8 +1,8 @@
-import Reconciler from 'react-reconciler'
+import ReactReconciler from 'react-reconciler'
 import { setupHostConfig } from './setupHostConfig'
 import { ReactFacetReconciler } from './types'
 
 /**
  * @private consider using render instead
  */
-export const createReconciler = (): ReactFacetReconciler => Reconciler(setupHostConfig()) as ReactFacetReconciler
+export const createReconciler = (): ReactFacetReconciler => ReactReconciler(setupHostConfig()) as ReactFacetReconciler

scripts/moveAllPackagedToArtifacts.ts

@@ -1,23 +1,23 @@
-import fs from 'fs-extra'
+import { removeSync, mkdirSync, moveSync } from 'fs-extra'
 import path from 'path'
-import glob from 'glob'
+import { sync as globSync } from 'glob'
 import { green } from 'chalk'
 
 const artifactsFolderPath = path.resolve(__dirname, '..', 'artifacts')
 const packagesFolderPath = path.resolve(__dirname, '..', 'packages')
 const tgzsGlob = path.join(packagesFolderPath, '*', '*', '*.tgz')
 
 try {
-  fs.removeSync(artifactsFolderPath)
+  removeSync(artifactsFolderPath)
 } catch (e) {}
 
-const allTgzs = glob.sync(tgzsGlob)
+const allTgzs = globSync(tgzsGlob)
 
-fs.mkdirSync(artifactsFolderPath)
+mkdirSync(artifactsFolderPath)
 
 allTgzs.forEach((filePath) => {
   const fileName = path.basename(filePath)
-  fs.moveSync(path.resolve(__dirname, filePath), path.resolve(artifactsFolderPath, fileName))
+  moveSync(path.resolve(__dirname, filePath), path.resolve(artifactsFolderPath, fileName))
 })
 
 console.log(green('All .tgz packages placed in the artifacts/ folder'))