Use new JSX transform

packages/react-pdf/.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": "wojtekmaj/react-no-automatic-runtime"
+  "extends": "wojtekmaj/react"
 }

packages/react-pdf/src/Document.spec.tsx

@@ -1,5 +1,5 @@
 import { beforeAll, describe, expect, it, vi } from 'vitest';
-import React, { createRef } from 'react';
+import { createRef } from 'react';
 import { fireEvent, getByTestId, render } from '@testing-library/react';
 
 import { pdfjs } from './index.test.js';

packages/react-pdf/src/Document.tsx

@@ -1,13 +1,6 @@
 'use client';
 
-import React, {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-} from 'react';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import makeEventProps from 'make-event-props';
 import makeCancellable from 'make-cancellable-promise';

packages/react-pdf/src/Message.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 type MessageProps = {
   children?: React.ReactNode;
   type: 'error' | 'loading' | 'no-data';

packages/react-pdf/src/Outline.spec.tsx

@@ -1,5 +1,5 @@
 import { beforeAll, describe, expect, it } from 'vitest';
-import React, { createRef } from 'react';
+import { createRef } from 'react';
 import { render, screen } from '@testing-library/react';
 
 import { pdfjs } from './index.test.js';

packages/react-pdf/src/Outline.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useEffect, useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import makeCancellable from 'make-cancellable-promise';
 import makeEventProps from 'make-event-props';

packages/react-pdf/src/OutlineItem.spec.tsx

@@ -1,5 +1,4 @@
 import { beforeAll, describe, expect, it, vi } from 'vitest';
-import React from 'react';
 import { fireEvent, getAllByRole, render, screen } from '@testing-library/react';
 
 import { pdfjs } from './index.test.js';

packages/react-pdf/src/OutlineItem.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import invariant from 'tiny-invariant';
 
 import Ref from './Ref.js';

packages/react-pdf/src/Page.spec.tsx

@@ -1,5 +1,5 @@
 import { beforeAll, describe, expect, it, vi } from 'vitest';
-import React, { createRef } from 'react';
+import { createRef } from 'react';
 import { fireEvent, render } from '@testing-library/react';
 
 import { pdfjs } from './index.test.js';

packages/react-pdf/src/Page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import makeCancellable from 'make-cancellable-promise';
 import makeEventProps from 'make-event-props';

packages/react-pdf/src/Page/AnnotationLayer.spec.tsx

@@ -1,5 +1,4 @@
 import { beforeAll, describe, expect, it } from 'vitest';
-import React from 'react';
 import { render } from '@testing-library/react';
 
 import { pdfjs } from '../index.test.js';

packages/react-pdf/src/Page/AnnotationLayer.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import makeCancellable from 'make-cancellable-promise';
 import clsx from 'clsx';
 import invariant from 'tiny-invariant';

packages/react-pdf/src/Page/PageCanvas.spec.tsx

@@ -1,5 +1,4 @@
 import { beforeAll, describe, expect, it, vi } from 'vitest';
-import React from 'react';
 import { render } from '@testing-library/react';
 
 import { pdfjs } from '../index.test.js';

packages/react-pdf/src/Page/PageCanvas.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import mergeRefs from 'merge-refs';
 import invariant from 'tiny-invariant';
 import warning from 'warning';

packages/react-pdf/src/Page/PageSVG.spec.tsx

@@ -1,6 +1,5 @@
 import { Blob } from 'node:buffer';
 import { beforeAll, describe, expect, it } from 'vitest';
-import React from 'react';
 import { render } from '@testing-library/react';
 
 import { pdfjs } from '../index.test.js';

packages/react-pdf/src/Page/PageSVG.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import makeCancellable from 'make-cancellable-promise';
 import invariant from 'tiny-invariant';
 import warning from 'warning';

packages/react-pdf/src/Page/TextLayer.spec.tsx

@@ -1,5 +1,4 @@
 import { beforeAll, describe, expect, it, vi } from 'vitest';
-import React from 'react';
 import { render } from '@testing-library/react';
 
 import { pdfjs } from '../index.test.js';

packages/react-pdf/src/Page/TextLayer.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
 import makeCancellable from 'make-cancellable-promise';
 import clsx from 'clsx';
 import invariant from 'tiny-invariant';

packages/react-pdf/src/StructTree.spec.tsx

@@ -1,5 +1,4 @@
 import { beforeAll, describe, expect, it } from 'vitest';
-import React from 'react';
 import { render } from '@testing-library/react';
 
 import { pdfjs } from './index.test.js';

packages/react-pdf/src/StructTree.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import makeCancellable from 'make-cancellable-promise';
 import invariant from 'tiny-invariant';
 import warning from 'warning';

packages/react-pdf/src/StructTreeItem.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 
 import {
   getAttributes,

packages/react-pdf/src/Thumbnail.spec.tsx

@@ -1,5 +1,4 @@
 import { beforeAll, describe, expect, it, vi } from 'vitest';
-import React, { createRef } from 'react';
 import { fireEvent, render } from '@testing-library/react';
 
 import { pdfjs } from './index.test.js';

packages/react-pdf/src/Thumbnail.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import React from 'react';
 import clsx from 'clsx';
 import invariant from 'tiny-invariant';
 

packages/react-pdf/tsconfig.json

@@ -3,7 +3,7 @@
     "declaration": true,
     "esModuleInterop": true,
     "isolatedModules": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "module": "nodenext",
     "noEmit": true,
     "noUncheckedIndexedAccess": true,

test/Test.tsx

@@ -296,8 +296,8 @@ export default function Test() {
                 displayAll ? (
                   Array.from(new Array(numPages), (el, index) => (
                     <Page
-                      {...pageProps}
                       key={`page_${index + 1}`}
+                      {...pageProps}
                       inputRef={
                         pageNumber === index + 1 ? (ref) => ref && ref.scrollIntoView() : null
                       }

test/shared/utils.ts

@@ -40,7 +40,7 @@ export function isBlob(variable: unknown): variable is Blob {
  * @param {*} variable String to check
  */
 export function isDataURI(variable: unknown): variable is `data:${string}` {
-  return isString(variable) && /^data:/.test(variable);
+  return isString(variable) && variable.startsWith('data:');
 }
 
 export function dataURItoByteString(dataURI: unknown): string {