feature/RHTL-68 – server-side-rendering

.all-contributorsrc

@@ -201,7 +201,12 @@
       "avatar_url": "https://avatars0.githubusercontent.com/u/37798644?v=4",
       "profile": "https://github.com/joshuaellis",
       "contributions": [
-        "doc"
+        "doc",
+        "code",
+        "design",
+        "ideas",
+        "maintenance",
+        "test"
       ]
     },
     {

.eslintignore

@@ -1,5 +1,9 @@
 node_modules
 coverage
 lib
+dom
+native
+server
+pure
 .docz
 site

.eslintrc

@@ -6,12 +6,11 @@
     "no-await-in-loop": "off",
     "no-console": "off",
     "import/no-unresolved": "off",
-    "react-hooks/rules-of-hooks": "off",
     "@typescript-eslint/no-floating-promises": "off",
     "@typescript-eslint/no-unnecessary-condition": "off",
     "@typescript-eslint/no-invalid-void-type": "off"
   },
   "parserOptions": {
-    "project": ["./tsconfig.json", "./test/tsconfig.json"]
+    "project": ["./tsconfig.json", "./test/tsconfig.json", "./scripts/tsconfig.json"]
   }
 }

.gitignore

@@ -1,5 +1,10 @@
 node_modules
 coverage
 lib
+dom
+native
+server
+pure
 .docz
-site
+site
+.vscode

README.md

@@ -42,6 +42,7 @@
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
+
 - [The problem](#the-problem)
 - [The solution](#the-solution)
 - [When to use this library](#when-to-use-this-library)
@@ -189,7 +190,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <td align="center"><a href="https://github.com/hemlok"><img src="https://avatars2.githubusercontent.com/u/9043345?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Adam Seckel</b></sub></a><br /><a href="https://github.com/testing-library/react-hooks-testing-library/commits?author=hemlok" title="Code">💻</a></td>
     <td align="center"><a href="https://keiya01.github.io/portfolio"><img src="https://avatars1.githubusercontent.com/u/34934510?v=4?s=100" width="100px;" alt=""/><br /><sub><b>keiya sasaki</b></sub></a><br /><a href="https://github.com/testing-library/react-hooks-testing-library/commits?author=keiya01" title="Tests">⚠️</a></td>
     <td align="center"><a href="https://huchen.dev/"><img src="https://avatars3.githubusercontent.com/u/2078389?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Hu Chen</b></sub></a><br /><a href="https://github.com/testing-library/react-hooks-testing-library/commits?author=huchenme" title="Code">💻</a> <a href="https://github.com/testing-library/react-hooks-testing-library/commits?author=huchenme" title="Documentation">📖</a> <a href="#example-huchenme" title="Examples">💡</a></td>
-    <td align="center"><a href="https://github.com/joshuaellis"><img src="https://avatars0.githubusercontent.com/u/37798644?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Josh</b></sub></a><br /><a href="https://github.com/testing-library/react-hooks-testing-library/commits?author=joshuaellis" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/joshuaellis"><img src="https://avatars0.githubusercontent.com/u/37798644?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Josh</b></sub></a><br /><a href="https://github.com/testing-library/react-hooks-testing-library/commits?author=joshuaellis" title="Documentation">📖</a> <a href="https://github.com/testing-library/react-hooks-testing-library/commits?author=joshuaellis" title="Code">💻</a> <a href="#design-joshuaellis" title="Design">🎨</a> <a href="#ideas-joshuaellis" title="Ideas, Planning, & Feedback">🤔</a> <a href="#maintenance-joshuaellis" title="Maintenance">🚧</a> <a href="https://github.com/testing-library/react-hooks-testing-library/commits?author=joshuaellis" title="Tests">⚠️</a></td>
     <td align="center"><a href="https://github.com/Goldziher"><img src="https://avatars1.githubusercontent.com/u/30733348?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Na'aman Hirschfeld</b></sub></a><br /><a href="https://github.com/testing-library/react-hooks-testing-library/commits?author=Goldziher" title="Code">💻</a></td>
   </tr>
   <tr>

jest.config.js

@@ -3,5 +3,5 @@ const { jest: jestConfig } = require('kcd-scripts/config')
 
 module.exports = Object.assign(jestConfig, {
   roots: ['<rootDir>/src', '<rootDir>/test'],
-  testMatch: ['<rootDir>/test/*.(ts|tsx|js)']
+  testMatch: ['<rootDir>/test/**/*.(ts|tsx|js)']
 })

package.json

@@ -14,7 +14,10 @@
   "files": [
     "lib",
     "src",
-    "pure.js",
+    "dom",
+    "native",
+    "server",
+    "pure",
     "dont-cleanup-after-each.js"
   ],
   "author": "Michael Peyper <mpeyper7@gmail.com>",
@@ -27,7 +30,8 @@
     "setup": "npm install && npm run validate -s",
     "validate": "kcd-scripts validate",
     "prepare": "npm run build",
-    "build": "kcd-scripts build --out-dir lib",
+    "build": "kcd-scripts build --out-dir lib && npm run generate:submodules",
+    "generate:submodules": "ts-node scripts/generate-submodules.ts",
     "test": "kcd-scripts test",
     "typecheck": "kcd-scripts typecheck",
     "lint": "kcd-scripts lint",
@@ -40,6 +44,7 @@
   "dependencies": {
     "@babel/runtime": "^7.12.5",
     "@types/react": ">=16.9.0",
+    "@types/react-dom": ">=16.9.0",
     "@types/react-test-renderer": ">=16.9.0"
   },
   "devDependencies": {
@@ -54,11 +59,25 @@
     "kcd-scripts": "7.5.3",
     "prettier": "^2.2.1",
     "react": "17.0.1",
+    "react-dom": "^17.0.1",
     "react-test-renderer": "17.0.1",
+    "ts-node": "^9.1.1",
     "typescript": "4.1.3"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
+    "react-dom": ">=16.9.0",
     "react-test-renderer": ">=16.9.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    },
+    "react-test-renderer": {
+      "optional": true
+    }
   }
 }

scripts/generate-submodules.ts

@@ -0,0 +1,63 @@
+import fs from 'fs'
+import path from 'path'
+
+type Template = (submodule: string) => string
+
+const templates = {
+  index: {
+    '.js': (submodule: string) => `module.exports = require('../lib/${submodule}')`,
+    '.d.ts': (submodule: string) => `export * from '../lib/${submodule}'`
+  },
+  pure: {
+    '.js': (submodule: string) => `module.exports = require('../lib/${submodule}/pure')`,
+    '.d.ts': (submodule: string) => `export * from '../lib/${submodule}/pure'`
+  }
+}
+
+const submodules = ['dom', 'native', 'server', 'pure']
+
+function cleanDirectory(directory: string) {
+  const files = fs.readdirSync(directory)
+  files.forEach((file) => fs.unlinkSync(path.join(directory, file)))
+}
+
+function makeDirectory(submodule: string) {
+  const submoduleDir = path.join(process.cwd(), submodule)
+
+  if (fs.existsSync(submoduleDir)) {
+    cleanDirectory(submoduleDir)
+  } else {
+    fs.mkdirSync(submoduleDir)
+  }
+
+  return submoduleDir
+}
+
+function requiredFile(submodule: string) {
+  return ([name]: [string, unknown]) => {
+    return name !== submodule
+  }
+}
+
+function makeFile(directory: string, submodule: string) {
+  return ([name, extensions]: [string, Record<string, Template>]) => {
+    Object.entries(extensions).forEach(([extension, template]) => {
+      const fileName = `${name}${extension}`
+      console.log(`  - ${fileName}`)
+      const filePath = path.join(directory, fileName)
+      fs.writeFileSync(filePath, template(submodule))
+    })
+  }
+}
+
+function makeFiles(directory: string, submodule: string) {
+  Object.entries(templates).filter(requiredFile(submodule)).forEach(makeFile(directory, submodule))
+}
+
+function createSubmodule(submodule: string) {
+  console.log(`Generating submodule: ${submodule}`)
+  const submoduleDir = makeDirectory(submodule)
+  makeFiles(submoduleDir, submodule)
+}
+
+submodules.forEach(createSubmodule)

scripts/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../tsconfig",
+  "compilerOptions": {
+    "declaration": false
+  },
+  "exclude": [],
+  "include": ["./**/*.ts"]
+}

src/asyncUtils.ts → src/core/asyncUtils.ts

@@ -1,28 +1,15 @@
-import { act } from 'react-test-renderer'
+import { Act, WaitOptions, AsyncUtils } from '../types'
 
-export interface WaitOptions {
-  interval?: number
-  timeout?: number
-  suppressErrors?: boolean
-}
-
-class TimeoutError extends Error {
-  constructor(util: Function, timeout: number) {
-    super(`Timed out in ${util.name} after ${timeout}ms.`)
-  }
-}
-
-function resolveAfter(ms: number) {
-  return new Promise((resolve) => {
-    setTimeout(resolve, ms)
-  })
-}
+import { resolveAfter } from '../helpers/promises'
+import { TimeoutError } from '../helpers/error'
 
-function asyncUtils(addResolver: (callback: () => void) => void) {
+function asyncUtils(act: Act, addResolver: (callback: () => void) => void): AsyncUtils {
   let nextUpdatePromise: Promise<void> | null = null
 
   const waitForNextUpdate = async ({ timeout }: Pick<WaitOptions, 'timeout'> = {}) => {
-    if (!nextUpdatePromise) {
+    if (nextUpdatePromise) {
+      await nextUpdatePromise
+    } else {
       nextUpdatePromise = new Promise((resolve, reject) => {
         let timeoutId: ReturnType<typeof setTimeout>
         if (timeout && timeout > 0) {
@@ -39,7 +26,6 @@ function asyncUtils(addResolver: (callback: () => void) => void) {
       })
       await act(() => nextUpdatePromise as Promise<void>)
     }
-    await nextUpdatePromise
   }
 
   const waitFor = async (
@@ -52,7 +38,7 @@ function asyncUtils(addResolver: (callback: () => void) => void) {
         return callbackResult ?? callbackResult === undefined
       } catch (error: unknown) {
         if (!suppressErrors) {
-          throw error as Error
+          throw error
         }
         return undefined
       }
@@ -76,7 +62,7 @@ function asyncUtils(addResolver: (callback: () => void) => void) {
           if (error instanceof TimeoutError && initialTimeout) {
             throw new TimeoutError(waitFor, initialTimeout)
           }
-          throw error as Error
+          throw error
         }
         if (timeout) timeout -= Date.now() - startTime
       }
@@ -98,7 +84,7 @@ function asyncUtils(addResolver: (callback: () => void) => void) {
       if (error instanceof TimeoutError && options.timeout) {
         throw new TimeoutError(waitForValueToChange, options.timeout)
       }
-      throw error as Error
+      throw error
     }
   }
 

src/cleanup.ts → src/core/cleanup.ts

@@ -16,4 +16,13 @@ function removeCleanup(callback: () => Promise<void> | void) {
   cleanupCallbacks = cleanupCallbacks.filter((cb) => cb !== callback)
 }
 
-export { cleanup, addCleanup, removeCleanup }
+function autoRegisterCleanup() {
+  // Automatically registers cleanup in supported testing frameworks
+  if (typeof afterEach === 'function' && !process.env.RHTL_SKIP_AUTO_CLEANUP) {
+    afterEach(async () => {
+      await cleanup()
+    })
+  }
+}
+
+export { cleanup, addCleanup, removeCleanup, autoRegisterCleanup }

src/core/index.ts

@@ -0,0 +1,78 @@
+import { CreateRenderer, Renderer, RenderResult, RenderHook } from '../types'
+import { ResultContainer, RenderHookOptions } from '../types/internal'
+
+import asyncUtils from './asyncUtils'
+import { cleanup, addCleanup, removeCleanup } from './cleanup'
+
+function resultContainer<TValue>(): ResultContainer<TValue> {
+  const results: Array<{ value?: TValue; error?: Error }> = []
+  const resolvers: Array<() => void> = []
+
+  const result: RenderResult<TValue> = {
+    get all() {
+      return results.map(({ value, error }) => error ?? value)
+    },
+    get current() {
+      const { value, error } = results[results.length - 1]
+      if (error) {
+        throw error
+      }
+      return value as TValue
+    },
+    get error() {
+      const { error } = results[results.length - 1]
+      return error
+    }
+  }
+
+  const updateResult = (value?: TValue, error?: Error) => {
+    results.push({ value, error })
+    resolvers.splice(0, resolvers.length).forEach((resolve) => resolve())
+  }
+
+  return {
+    result,
+    addResolver: (resolver: () => void) => {
+      resolvers.push(resolver)
+    },
+    setValue: (value: TValue) => updateResult(value),
+    setError: (error: Error) => updateResult(undefined, error)
+  }
+}
+
+const createRenderHook = <TProps, TResult, TOptions extends {}, TRenderer extends Renderer<TProps>>(
+  createRenderer: CreateRenderer<TProps, TResult, TOptions, TRenderer>
+) => (
+  callback: (props: TProps) => TResult,
+  options: RenderHookOptions<TProps, TOptions> = {} as RenderHookOptions<TProps, TOptions>
+): RenderHook<TProps, TResult, TRenderer> => {
+  const { result, setValue, setError, addResolver } = resultContainer<TResult>()
+  const renderProps = { callback, setValue, setError }
+  let hookProps = options.initialProps
+
+  const { render, rerender, unmount, act, ...renderUtils } = createRenderer(renderProps, options)
+
+  render(hookProps)
+
+  function rerenderHook(newProps = hookProps) {
+    hookProps = newProps
+    rerender(hookProps)
+  }
+
+  function unmountHook() {
+    removeCleanup(unmountHook)
+    unmount()
+  }
+
+  addCleanup(unmountHook)
+
+  return {
+    result,
+    rerender: rerenderHook,
+    unmount: unmountHook,
+    ...asyncUtils(act, addResolver),
+    ...renderUtils
+  }
+}
+
+export { createRenderHook, cleanup, addCleanup, removeCleanup }

src/dom/index.ts

@@ -0,0 +1,5 @@
+import { autoRegisterCleanup } from '../core/cleanup'
+
+autoRegisterCleanup()
+
+export * from './pure'