Adopt react-lib-tools

.github/workflows/eslint.yml

@@ -0,0 +1,15 @@
+name: "ESLint"
+on: [pull_request]
+jobs:
+  eslint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 10
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile --recursive
+      - name: Run ESLint
+        run: pnpm lint

.github/workflows/pending-changes.yml

@@ -0,0 +1,16 @@
+name: "Pending changes"
+on: [pull_request]
+jobs:
+  pending-changes:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 10
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile --recursive
+      - uses: nickcharlton/diff-check@main
+        with:
+          command: pnpm run compile

.github/workflows/prettier.yml

@@ -0,0 +1,15 @@
+name: "Prettier"
+on: [pull_request]
+jobs:
+  prettier:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 10
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile --recursive
+      - name: Run Prettier
+        run: pnpm run prettier:ci

.github/workflows/typescript.yml

@@ -0,0 +1,17 @@
+name: "TypeScript"
+on: [pull_request]
+jobs:
+  typescript:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 10
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile --recursive
+      - name: Build NPM package
+        run: pnpm build
+      - name: Run TypeScript
+        run: pnpm tsc

.github/workflows/vitest.yml

@@ -0,0 +1,17 @@
+name: "Vitest"
+on: [pull_request]
+jobs:
+  unit-tests:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 10
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile --recursive
+      - name: Build NPM packages
+        run: pnpm run build
+      - name: Run tests
+        run: pnpm run test:ci

.nvmrc

@@ -1 +1 @@
-v20.9.0
+18

.prettierignore

@@ -1,2 +1,5 @@
-dist
-node_modules
+/dist
+/docs
+/generated
+/public
+/src/routes/examples

README.md

@@ -19,10 +19,83 @@ yarn add react-error-boundary
 
 ## API
 
-### `ErrorBoundary` component
-Wrap an `ErrorBoundary` component around other React components to "catch" errors and render a fallback UI. The component supports several ways to render a fallback (as shown below).
-
-> **Note** `ErrorBoundary` is a _client_ component. You can only pass props to it that are serializeable or use it in files that have a `"use client";` directive.
+### ErrorBoundary
+
+<!-- ErrorBoundary:description:begin -->
+A reusable React [error boundary](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) component.
+Wrap this component around other React components to "catch" errors and render a fallback UI.
+
+
+ℹ️ The component provides several ways to render a fallback: `fallback`, `fallbackRender`, and `FallbackComponent`.
+Refer to the documentation to determine which is best for your application.
+
+ℹ️ This is a **client component**. You can only pass props to it that are serializeable or use it in files that have a `"use client";` directive.
+<!-- ErrorBoundary:description:end -->
+
+#### Required props
+
+<!-- ErrorBoundary:required-props:begin -->
+None
+<!-- ErrorBoundary:required-props:end -->
+
+#### Optional props
+
+<!-- ErrorBoundary:optional-props:begin -->
+
+<table>
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>onError</td>
+      <td><p>Optional callback to enable e.g. logging error information to a server.
+@param error Error that was thrown
+@param info React &quot;component stack&quot; identifying where the error was thrown</p>
+</td>
+    </tr>
+    <tr>
+      <td>onReset</td>
+      <td><p>Optional callback to to be notified when an error boundary is &quot;reset&quot; so React can retry the failed render.</p>
+</td>
+    </tr>
+    <tr>
+      <td>resetKeys</td>
+      <td><p>When changed, these keys will reset a triggered error boundary.
+This can be useful when an error condition may be tied to some specific state (that can be uniquely identified by key).
+See the the documentation for examples of how to use this prop.</p>
+</td>
+    </tr>
+    <tr>
+      <td>fallback</td>
+      <td><p>Static content to render in place of an error if one is thrown.</p>
+<pre><code class="language-tsx">&lt;ErrorBoundary fallback={&lt;div class=&quot;text-red&quot;&gt;Something went wrong&lt;/div&gt;} /&gt;
+</code></pre>
+</td>
+    </tr>
+    <tr>
+      <td>FallbackComponent</td>
+      <td><p>React component responsible for returning a fallback UI based on a thrown value.</p>
+<pre><code class="language-tsx">&lt;ErrorBoundary FallbackComponent={Fallback} /&gt;
+</code></pre>
+</td>
+    </tr>
+    <tr>
+      <td>fallbackRender</td>
+      <td><p><a href="https://react.dev/reference/react/Children#calling-a-render-prop-to-customize-rendering">Render prop</a> function responsible for returning a fallback UI based on a thrown value.</p>
+<pre><code class="language-tsx">&lt;ErrorBoundary fallbackRender={({ error, resetErrorBoundary }) =&gt; &lt;div&gt;...&lt;/div&gt;} /&gt;
+</code></pre>
+</td>
+    </tr>
+  </tbody>
+</table>
+
+<!-- ErrorBoundary:optional-props:end -->
+
+## Examples
 
 #### `ErrorBoundary` with `fallback` prop
 The simplest way to render a default "something went wrong" type of error message.