Add ESLint checks

.eslintignore

@@ -0,0 +1,9 @@
+node_modules/
+dist/
+coverage/
+build/
+artifacts/
+.github/
+.vscode/
+.yarn/
+.eslintrc.js

.eslintrc.js

@@ -0,0 +1,67 @@
+/* eslint-env node */
+
+module.exports = {
+  extends: ['plugin:prettier/recommended', 'prettier/@typescript-eslint', '@react-facet/eslint-config'],
+  plugins: ['react', 'require-in-package', 'react-hooks', 'prettier'],
+
+  root: true,
+
+  env: {
+    es6: true,
+    browser: true,
+    jest: true,
+  },
+
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    tsconfigRootDir: './',
+    project: './tsconfig.json',
+  },
+
+  rules: {
+    'no-unreachable': 'error',
+    'no-undef': 'error',
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'error',
+    'react/jsx-uses-react': 'error',
+    'react/jsx-uses-vars': 'error',
+    'require-in-package/require-in-package': 2,
+  },
+
+  overrides: [
+    {
+      files: ['./**/*.{ts,tsx}'],
+      plugins: ['@typescript-eslint'],
+      extends: ['plugin:@typescript-eslint/recommended'],
+      rules: {
+        '@typescript-eslint/prefer-interface': 0,
+        '@typescript-eslint/explicit-function-return-type': 0,
+        '@typescript-eslint/explicit-member-accessibility': 0,
+        '@typescript-eslint/no-explicit-any': 'error',
+        '@typescript-eslint/no-unused-vars': 'error',
+        '@typescript-eslint/no-use-before-define': 0,
+        '@typescript-eslint/no-var-requires': 0,
+        '@typescript-eslint/explicit-module-boundary-types': 0,
+        '@typescript-eslint/strict-boolean-expressions': ['error', { allowNullableBoolean: true }],
+        '@typescript-eslint/no-empty-function': 0,
+        '@typescript-eslint/naming-convention': [
+          'error',
+          {
+            selector: 'variableLike',
+            format: ['camelCase', 'UPPER_CASE', 'PascalCase'],
+            leadingUnderscore: 'allowSingleOrDouble',
+          },
+          {
+            selector: 'typeLike',
+            format: ['PascalCase'],
+          },
+          {
+            selector: 'property',
+            format: ['camelCase', 'UPPER_CASE', 'PascalCase'],
+            leadingUnderscore: 'allowSingleOrDouble',
+          },
+        ],
+      },
+    },
+  ],
+}

.github/workflows/test.yml

@@ -8,3 +8,10 @@ jobs:
       - uses: actions/checkout@v2
       - run: yarn install --immutable
       - run: yarn test --ci
+
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - run: yarn install --immutable
+      - run: yarn lint

examples/benchmarking/compare.ts

@@ -23,6 +23,11 @@ const compare = async (optionA: string, optionB: string, targetRelativePerforman
 
   const browser = await puppeteer.launch()
 
+  interface TraceEvent {
+    name: string
+    dur: number
+  }
+
   const runExample = async (example: string, iteration: number): Promise<number> => {
     const traceFile = `./tmp/${example}-${iteration}.json`
     const page = await browser.newPage()
@@ -39,10 +44,12 @@ const compare = async (optionA: string, optionB: string, targetRelativePerforman
 
     const { traceEvents } = require(traceFile)
 
-    const events = traceEvents.filter((event: any) => event.name === 'FireAnimationFrame' || event.name === 'MinorGC')
+    const events = traceEvents.filter(
+      (event: TraceEvent) => event.name === 'FireAnimationFrame' || event.name === 'MinorGC',
+    )
     const sampledEvents = events.slice(OFFSET_FRAMES, SAMPLE_SIZE + OFFSET_FRAMES)
 
-    const totalTime = sampledEvents.reduce((total: number, event: any) => total + event.dur, 0)
+    const totalTime = sampledEvents.reduce((total: number, event: TraceEvent) => total + event.dur, 0)
 
     if (sampledEvents.length !== SAMPLE_SIZE) {
       console.log(`Not enough samples. Measured "${events.length}" of target "${SAMPLE_SIZE}".`)

examples/benchmarking/webpack.config.js

@@ -1,3 +1,5 @@
+/* eslint-env node */
+
 const fs = require('fs')
 const path = require('path')
 const HtmlWebpackPlugin = require('html-webpack-plugin')

jest.setupTestFrameworkScriptFile.js

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

package.json

@@ -10,6 +10,7 @@
     "build": "yarn workspaces foreach --topological --verbose run build",
     "publish": "yarn workspaces foreach --topological --no-private npm publish --tolerate-republish --access public",
     "test": "cross-env NODE_ENV=test jest --coverage",
+    "lint": "eslint .",
     "package": "yarn workspaces foreach --topological --verbose pack --out=%s-%v.tgz && ts-node ./scripts/moveAllPackagedToArtifacts.ts"
   },
   "devDependencies": {
@@ -23,9 +24,17 @@
     "@types/fs-extra": "^9.0.12",
     "@types/glob": "^7",
     "@types/prettier": "^2",
+    "@typescript-eslint/eslint-plugin": "^4.22.0",
+    "@typescript-eslint/parser": "^4.22.0",
     "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-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.23.2",
+    "eslint-plugin-react-hooks": "^4.1.1",
+    "eslint-plugin-require-in-package": "^1.0.3",
     "fs-extra": "^10.0.0",
     "glob": "^7.1.7",
     "jest": "^26.1.0",

packages/@react-facet/core/jest.config.js

@@ -1,3 +1,5 @@
+/* eslint-env node */
+
 const baseConfig = require('../../../jest.base.config')
 const projectName = require('./package.json').name
 

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

@@ -2,6 +2,7 @@ import React from 'react'
 import { render } from '@react-facet/dom-fiber-testing-library'
 import { Mount } from '.'
 import { createFacet } from '../facet'
+import { NO_VALUE } from '../types'
 
 it('renders when true', () => {
   const display = createFacet({ initialValue: true })
@@ -47,8 +48,31 @@ it('does not render when false', () => {
 
   const scenario = <Example />
 
-  const { container } = render(scenario)
+  render(scenario)
+
+  expect(rendered).not.toHaveBeenCalled()
+})
+
+it('does not render facet has no value', () => {
+  const display = createFacet<boolean>({ initialValue: NO_VALUE })
+  const rendered = jest.fn()
+
+  const Content = () => {
+    rendered()
+    return <div>Hello there</div>
+  }
+
+  const Example = () => {
+    return (
+      <Mount when={display}>
+        <Content />
+      </Mount>
+    )
+  }
+
+  const scenario = <Example />
+
+  render(scenario)
 
   expect(rendered).not.toHaveBeenCalled()
-  expect(container.firstChild).toMatchSnapshot()
 })

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

@@ -9,5 +9,5 @@ type MountProps = {
 
 export const Mount = ({ when, children }: MountProps) => {
   const whenValue = useFacetUnwrap(when)
-  return whenValue ? children : null
+  return whenValue === true ? children : null
 }

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

@@ -1,7 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`does not render when false 1`] = `null`;
-
 exports[`renders when true 1`] = `
 <div>
   Hello there

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

@@ -11,7 +11,7 @@ import { EqualityCheck } from './types'
 export const createUniformObjectEqualityCheck =
   <T>(comparator: EqualityCheck<T[Extract<keyof T, string>]>) =>
   () => {
-    let previous: Partial<{ [K in keyof T]: ReturnType<typeof comparator> }> = {}
+    const previous: Partial<{ [K in keyof T]: ReturnType<typeof comparator> }> = {}
     let previousKeys: Set<keyof T> = new Set()
     let initialized = false
 
@@ -27,14 +27,14 @@ export const createUniformObjectEqualityCheck =
         previousKeys.delete(key)
       }
       if (previousKeys.size > 0) {
-        for (let key of previousKeys) {
+        for (const key of previousKeys) {
           delete previous[key]
         }
         isEquals = false
       }
 
       previousKeys = new Set()
-      for (let key in current) {
+      for (const key in current) {
         previousKeys.add(key)
       }
 
@@ -58,15 +58,15 @@ export const createUniformObjectEqualityCheck =
 export const createUniformArrayEqualityCheck =
   <T>(comparator: EqualityCheck<T>) =>
   () => {
-    let previous: ReturnType<typeof comparator>[] = []
+    const previous: ReturnType<typeof comparator>[] = []
     let initialized = false
 
     return (current: T[]) => {
       const longestLength = Math.max(previous?.length ?? 0, current?.length ?? 0)
 
       let isEquals = true
       for (let i = 0; i < longestLength; i++) {
-        if (!previous[i]) {
+        if (previous[i] == null) {
           previous[i] = comparator()
         }
         if (!previous[i](current[i])) {

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

@@ -5,6 +5,7 @@ import { ObjectWithImmutables, Immutable, Option, NO_VALUE } from './types'
  * Checks that the current value is exactly the same as the other previous one. Accepts value of type
  * function, number, boolean, string, undefined or null
  */
+// eslint-disable-next-line @typescript-eslint/ban-types
 export const strictEqualityCheck = <T extends Immutable | Function>() => {
   let previous: Option<T> = NO_VALUE
   return (current: T) => {

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

@@ -22,7 +22,7 @@ it('captures the current value of the facet in a function that can be used as ha
       (value) => (event) => {
         cb(value, dependency, event)
       },
-      [dependency],
+      [dependency, cb],
       demoFacet,
     )
 
@@ -97,7 +97,7 @@ it('should work with uninitialized values', () => {
       (value) => () => {
         cb(value)
       },
-      [],
+      [cb],
       internalDemoFacet,
     )
 

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { act, render, fireEvent } from '@react-facet/dom-fiber-testing-library'
+import { render, fireEvent } from '@react-facet/dom-fiber-testing-library'
 import { Option, NO_VALUE } from '../types'
 import { useFacetReducer } from './useFacetReducer'
 

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

@@ -1,4 +1,4 @@
-import { Facet, NO_VALUE } from '../types'
+import { Facet } from '../types'
 import { useRef } from 'react'
 import { useFacetEffect } from './useFacetEffect'
 import { NoValue } from '..'

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

@@ -1,6 +1,6 @@
 import { useLayoutEffect, useState } from 'react'
 import { NoValue } from '..'
-import { FacetProp, isFacet, NO_VALUE, Value } from '../types'
+import { FacetProp, isFacet, Value } from '../types'
 
 /**
  * Hook that allows consuming values from a facet (local or remote), selector or dynamicSelector

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

@@ -20,6 +20,7 @@ export interface FacetFactory<T> {
   factory: typeof FACET_FACTORY
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type ExcludeFacetFactory<T> = T extends FacetFactory<any> ? never : T
 
 export interface Listener<T> {

packages/@react-facet/deferred-mount/jest.config.js

@@ -1,3 +1,5 @@
+/* eslint-env node */
+
 const baseConfig = require('../../../jest.base.config')
 const projectName = require('./package.json').name
 

packages/@react-facet/deferred-mount/src/index.tsx

@@ -105,7 +105,7 @@ export function DeferredMountProvider({
         window.cancelAnimationFrame(frameId)
       }
     },
-    [frameTimeBudget],
+    [frameTimeBudget, setIsDeferring, setRequestingToRun],
     requestingToRun,
   )
 

packages/@react-facet/dom-components/jest.config.js

@@ -1,3 +1,5 @@
+/* eslint-env node */
+
 const baseConfig = require('../../../jest.base.config')
 const projectName = require('./package.json').name
 

packages/@react-facet/dom-fiber-testing-library/jest.config.js

@@ -1,3 +1,5 @@
+/* eslint-env node */
+
 const baseConfig = require('../../../jest.base.config')
 const projectName = require('./package.json').name
 

packages/@react-facet/dom-fiber/jest.config.js

@@ -1,3 +1,5 @@
+/* eslint-env node */
+
 const baseConfig = require('../../../jest.base.config')
 const projectName = require('./package.json').name
 

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

@@ -110,7 +110,7 @@ export const setupHostConfig = (): HostConfig<
 
       const styleProp = newProps.style
 
-      for (let key in styleProp) {
+      for (const key in styleProp) {
         const value = styleProp[key]
 
         if (value != null) {
@@ -238,7 +238,7 @@ export const setupHostConfig = (): HostConfig<
   },
 
   commitUpdate: function (instance, updatePayload, type, oldProps, newProps) {
-    const { element: uncastElement, styleUnsubscribers } = instance
+    const { element: uncastElement } = instance
 
     if (type === 'fast-text') {
       const textElement = uncastElement as Text
@@ -265,7 +265,7 @@ export const setupHostConfig = (): HostConfig<
       const newStyleProp = newProps.style
 
       if (oldStyleProp != null) {
-        for (let key in oldStyleProp) {
+        for (const key in oldStyleProp) {
           const oldValue = oldStyleProp[key]
           const newValue = newStyleProp?.[key]
 
@@ -278,7 +278,7 @@ export const setupHostConfig = (): HostConfig<
       }
 
       if (newStyleProp != null) {
-        for (let key in newStyleProp) {
+        for (const key in newStyleProp) {
           const value = newProps.style?.[key]
 
           if (isFacet(value)) {

packages/@react-facet/eslint-config/src/index.js

@@ -1,3 +1,5 @@
+/* eslint-env node */
+
 module.exports = {
   plugins: ['react-hooks'],
   rules: {

packages/@react-facet/remote/jest.config.js

@@ -1,3 +1,5 @@
+/* eslint-env node */
+
 const baseConfig = require('../../../jest.base.config')
 const projectName = require('./package.json').name