jsx runtime (#2211)

* configure automatic runtime for jsx

* remove import react

* changeset

Author: jeetiss

.changeset/warm-impalas-behave.md

@@ -0,0 +1,5 @@
+---
+'@react-pdf/renderer': patch
+---
+
+configure automatic runtime for react

.eslintrc.js

@@ -6,7 +6,12 @@ module.exports = {
     node: true,
     'jest/globals': true,
   },
-  extends: ['plugin:react/recommended', 'airbnb', 'prettier'],
+  extends: [
+    'plugin:react/recommended',
+    'airbnb',
+    'prettier',
+    'plugin:react/jsx-runtime',
+  ],
   globals: {
     URL: false,
     BROWSER: false,

babel.config.js

@@ -10,7 +10,7 @@ module.exports = {
         },
       },
     ],
-    '@babel/preset-react',
+    ['@babel/preset-react', { runtime: 'automatic' }],
   ],
   plugins: [
     ['@babel/plugin-transform-runtime', { version: '^7.19.6' }],

packages/renderer/README.md

@@ -29,7 +29,6 @@ yarn add @react-pdf/renderer
 ## How it works
 
 ```jsx
-import React from 'react';
 import { Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer';
 
 // Create styles
@@ -62,7 +61,6 @@ const MyDocument = () => (
 
 ### `Web.` Render in DOM
 ```jsx
-import React from 'react';
 import ReactDOM from 'react-dom';
 import { PDFViewer } from '@react-pdf/renderer';
 
@@ -77,7 +75,6 @@ ReactDOM.render(<App />, document.getElementById('root'));
 
 ### `Node.` Save in a file
 ```jsx
-import React from 'react';
 import ReactPDF from '@react-pdf/renderer';
 
 ReactPDF.render(<MyDocument />, `${__dirname}/example.pdf`);

packages/renderer/rollup.config.js

@@ -31,11 +31,12 @@ const babelConfig = () => ({
   babelrc: true,
   exclude: 'node_modules/**',
   babelHelpers: 'runtime',
-  presets: ['@babel/preset-react'],
+  presets: [['@babel/preset-react', { runtime: 'automatic' }]],
 });
 
 const getExternal = ({ browser }) => [
   /@babel\/runtime/,
+  'react/jsx-runtime',
   ...(browser ? [] : ['fs', 'path', 'url']),
   ...Object.keys(pkg.dependencies).filter(name => name !== 'react-reconciler'),
   ...Object.keys(pkg.peerDependencies),

packages/renderer/src/dom/PDFDownloadLink.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
 
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 
 import usePDF from './usePDF';
 

packages/renderer/src/dom/PDFViewer.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 /* eslint-disable react/jsx-props-no-spreading */
 
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 
 import usePDF from './usePDF';
 

packages/renderer/tests/debug.test.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Document, Page, View, Text, Font } from '..';
 import renderToImage from './renderComponent';
 

packages/renderer/tests/flex.test.js

@@ -1,5 +1,4 @@
 /* eslint-disable react/no-array-index-key */
-import React from 'react';
 import { Document, Page, View } from '..';
 import renderToImage from './renderComponent';
 

packages/renderer/tests/gap.test.js

@@ -1,5 +1,4 @@
 /* eslint-disable react/no-array-index-key */
-import React from 'react';
 import { Document, Page, View } from '..';
 import renderToImage from './renderComponent';